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内 容 提 要 


本 书 通过 丰富 的 示例 和 详细 的 讲解 ， 介 绍 了 React Native 这 款 JavaScript 框架 。 在 React 
Native 中 利用 现 有 的 JavaScript 和 React 知识 ， 就 可 以 开发 和 部 署 功 能 完备 的 、 真正 原生 的 移动 
应 用 ， 并 同时 支持 iOS 与 Android 平台 。 除 了 框架 本 身 的 概念 讲解 之 外 ， ay eine 了 如 何 使 
用 第 三 方 库 ， 以 及 如 何 编写 自己 的 Java 或 Objective-C 的 React Native 扩展 。 第 2 版 结合 当前 开 
发 实践 ， 新 增 了 有 关 平 台 特 定 组 件 、 状 态 管理 和 Expo 应 用 的 内 容 。 

本 书 适 合 前 端 工程 师 或 Web 开发 者 ， 以 及 和 希望 开发 跨 平台 移动 应 用 的 其 他 开发 人 员 阅 读 
使 用 。 
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O’Reilly Media, Inc. 介 绍 


O’Reilly Media 通过 图 书 、 杂 志 、 在 线 服 务 、 调 查 研究 和 会 议 等 方式 传播 创新 知识 。 
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倡导 、 创 造 和 发 扬 光 大 。 


O'Reilly 为 软件 开发 人 员 带 来 革命 性 的 “动物 书 ”， 创 建 第 一 个 商业 网 站 (GNN) ; 组 
织 了 影响 深远 的 开放 源 代码 峰会 ， 以 至 于 开源 软件 运动 以 此 命名 ; 创 并 了 Make RE, 
从 而 成 为 DIY 革命 的 主要 先锋 ， 公 司 一 如 既往 地 通过 多 种 形式 缔结 信息 与 人 的 纽带 。 
O'Reilly 的 会 议和 峰会 集聚 了 众多 超级 极 客 和 高 瞻 远 瞩 的 商业 领袖 ， 共 同 描绘 出 开创 
新 产业 的 革命 性 思想 。 作 为 技术 人 士 获 取信 息 的 选择 ，O’Reilly 现在 还 将 先锋 专家 的 
知识 传递 给 普通 的 计算 机 用 户 。 无 论 是 通过 书籍 出 版 、 在 线 服务 还 是 面授 课程 ， 每 一 


















































项 O'Reilly 的 产品 都 反映 了 公司 不 可 动摇 的 理念 一 一 信息 是 激发 创新 的 力量 。 
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Yogi Berra 的 建议 去 做 了 :“ 如 果 你 在 路 上 遇 到 岔路 口 ， 走 小 路 ( 岔路 ) ”回顾 过 去 ， 
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本 书 将 介绍 React Native， 一 款 由 Facebook 公司 出 品 的 、 用 来 构建 移动 应 用 的 JavaScript 
框架 。 在 React Native 中 利用 现 有 的 JavaScript 和 React 知识 ， 就 可 以 开发 和 部 署 功 能 齐全 
的 、 真 正 原生 泻 染 的 移动 应 用 ， 并 同时 支持 iOS 与 Android 平台 。 在 不 牺牲 原生 样式 和 体 
验 的 前 提 下 ，React Native 比 传统 的 移动 开发 有 更 多 优势 。 


























我 们 将 从 基础 开始 学 习 ， 然 后 逐步 深入 ， 最 终 部 署 一 款 100% 代码 复 用 的 、 成 熟 的 移动 应 
用 到 iOS 和 Android 平台 。 除 了 框架 本 身 的 概念 讲解 之 外 ， 我 们 还 将 讨论 如 何 使 用 第 三 
库 ， 以 及 如 何 编写 自己 的 Java 或 Objective-C 的 React Native 扩展 。 














如 果 你 想 从 前 端 工程 师 或 Web 开发 者 的 视角 接触 移动 应 用 开发 ， 那 么 本 书 就 是 为 你 量 身 定 
制 的 。React Native 是 一 款 令 人 惊奇 的 框架 ， 愿 你 怀 着 和 我 一 样 喜悦 的 心情 来 探索 它 。 


预备 知识 


本 书 总 体 上 不 是 介绍 React 的 ， 我 们 假设 你 对 React 已 经 有 一 些 了 解 。 如 果 你 从 未 接触 过 
React， 我 建议 你 在 正式 开始 学 习 移动 开发 之 前 先 阅读 一 两 篇 相关 的 教程 ， 尤 其 应 该 熟悉 
React 的 属性 (props) 和 状态 (state)、 组 件 的 生命 周期 ， 以 及 如 何 创建 React 组 件 等 
知识 。 



























































同时 ， 我 们 也 会 使 用 一 些 现代 JavaScript 和 ISX 的 语法 。 如 果 你 对 这 些 还 不 太 熟 悉 也 没有 
关系 ， 我 们 将 在 第 2 章 讲解 JSX， 在 附录 A 中 介绍 现代 JavaScript 的 语法 。 这 些 语法 本 质 
上 与 你 习惯 的 JavaScript 代码 是 一 对 一 的 解析 关系 。 





本 书 主要 关注 使 用 React Native 来 编写 iOS 和 Android 应 用 ， 不 过 React Native 还 可 以 用 来 
写 运行 在 Ubuntu、Windows 和 macOS 上 的 应 用 。Linux 和 Windows 用 户 可 以 使 用 React 
Native 来 开发 Android 应 用 ,但 是 要 编写 iOS 应 用 ， 你 就 需要 在 macos 系统 上 进行 开发 。 
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排版 约定 
本 书 使 用 了 下 列 排版 约定 。 


。 黑体 
表示 新 术语 。 





。 等 宽 字 体 (constant width) 
表示 程序 片段 ， 以 及 正文 中 出 现 的 变量 、 函 数 名 、 数 据 库 、 数 据 类 型 、 环 境 变 量 、 语 句 
和 关键 字 等 。 


。 加 粗 等 宽 字 体 (constant width bold) 
表示 应 该 由 用 户 输 入 的 命令 或 其 他 文本 。 


。 等 宽 斜 体 (constant width italic) 
表示 应 该 由 用 户 输入 的 值 或 根据 上 下 文 确定 的 值 替 换 的 文本 。 








该 图 标 表示 一 般 注 记 。 








图 标 表示 提示 或 建议 。 


w 











使 用 代码 示例 


补充 材料 〈 代 码 示 例 、 练 习 等 ) 可 以 从 https://github.com/bonniee/learning-react-native 下 载 。 





本 书 是 要 帮 你 完成 工作 的 。 一 般 来 说 ， 如 果 本 书 提供 了 示例 代码 ， 你 可 以 把 它 用 在 你 的 程 
序 或 文档 中 。 除 非 你 使 用 了 很 大 一 部 分 代码 ， 否 则 无 须 联系 我 们 获得 许可 。 比 如 ， 用 本 书 
的 几 个 代码 片段 写 一 个 程序 就 无 须 获得 许可 ， 销 售 或 分 发 O'Reilly 图 书 的 示例 光盘 则 需要 
获得 许可 ; 引用 本 书 中 的 示例 代码 回答 问题 无 须 获得 许可 ， 将 书 中 大 量 的 代码 放 到 你 的 产 
品 文档 中 则 需要 获得 许可 。 


我 们 很 希望 但 并 不 强制 要 求 你 在 引用 本 书 内 容 时 加 上 引用 说 明 。 引 用 说 明 一 般 包括 书 名 、 



































作者 、 出 版 社 和 ISBN。 比 如 ,， “Learning React Native, Second Edition, by Bonnie Eisenman 
(O’Reilly). Copyright 2018 Bonnie Eisenman, 978-1-491-98914-2” , 














如 果 你 觉得 自己 对 示例 代码 的 用 法 超出 了 上 述 许可 的 范围 ， 欢 迎 你 通过 permissions @ 
oreilly.com 与 我 们 联系 。 


O’Reilly Safari 


4 Safari (原来 叫 Safari Books Online) 是 一 个 会 员 制 的 培训 和 参考 
Safari x4. ames, 政府、 教育 从 业者 和 个 人 。 


会 员 可 以 访问 几 千 种 图 书 、 培 训 视 频 、 学 习 路 径 、 互 动 式 教程 和 精 选 播放 列表 ， 提 供 这 些 
资源 的 出 版 商 超过 250 家 ， 包 括 OReilly Media, Harvard Business Review, Prentice Hall 


Professional, Addison-Wesley Professional, Microsoft Press, Sams, Que, Peachpit Press, 























Adobe, Focal Press, Cisco Press, John Wiley & Sons, Syngress. Morgan Kaufmann, IBM 
Redbooks, Packt, Adobe Press, FT Press. Apress. Manning, New Riders, McGraw-Hill, 


Jones & Bartlett, Course Technology, “°F. 

要 获得 更 多 信息 ， 请 访问 http://oreilly.com/safari, 
Ày + + 

联系 我 们 

请 把 对 本 书 的 评价 和 问题 发 给 出 版 社 。 


美国 : 
O’Reilly Media, Inc. 
1005 Gravenstein Highway North 
Sebastopol, CA 95472 





中 国 : 
北京 市 西城 区 西直门 南大 街 2 号 成 铭 大 厦 C 座 807 (100035) 
奥 莱 利 技术 咨询 (北京) ARAE 


O’Reilly 的 每 一 本 书 都 有 专属 网 页 ， 你 可 以 在 那儿 找到 本 书 的 相关 信息 ， 包 括 勘误 表 、 示 
例 代码 以 及 其 他 信息 。 本 书 的 网 站 地 址 是 http://shop.oreilly.com/product/0636920085270.do。 








对 于 本 书 的 评论 和 技术 性 问题 ， 请 发 送 电子 邮件 到 : bookquestions@oreilly.com。 
要 了 解 更 多 O'Reilly 图 书 、 培 训 课程 、 会 议和 新 闻 的 信息 ， 请 访问 以 下 网 站 : http://www. 


oreilly.com, 





我 们 在 Facebook 的 地 址 如 下 : http://facebook.com/oreilly, 





请 关注 我 们 的 Twitter 动态 : http://twitter.com/oreillymedia, 
我 们 的 YouTube 视频 地 址 如 下 : http:/www.youtube.com/oreillymedia。 
资源 


单枪匹马 会 让 学 习 过 程 变 得 困难 。 虽 然 事实 并 不 一 定 如 此 ， 但 你 不 一 定 要 这 样 做 。 这 里 有 
一 些 资源 ， 也 许 在 阅读 过 程 中 会 给 你 带 来 一 些 帮助 。 

















。 本 书 中 所 有 的 代码 示例 都 在 GitHub 代码 仓库 (https://github.com/bonniee/learning-react-native) 

中 ， 如 果 在 学 习 过 程 中 遇 到 困难 或 者 需要 代码 的 上 下 文 ， 不 妨 看 看 这 里 。 
。 加 入 LearningReactNative.com 的 邮件 列表 获取 后 续 的 文章 、 建 议和 实用 的 资源 。 
。 官方 文档 (https://facebook.github.io/react-native/) 中 有 大 量 优秀 的 参考 资料 。 


此 外 ，React Native 社区 也 是 实用 的 资源 。 



































e Stack Overflow 上 的 react-native 标签 分 类 (https://stackoverflow.com/questions/tagged/react- 


native) 。 
e Reactiflux (https://www.reactiflux.com/) 聊天 组 有 许多 核心 贡献 者 和 乐于 助人 的 成 员 。 


。 Freenode 上 的 #reactnative 小 组 (irc://chat.freenode.net/reactnative)。 
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电子 书 


扫描 如 下 二 维 码 ， 即 可 购买 本 书 电 子 版 。 






























































第 1 章 
初 识 React Native 





React Native 是 一 款 用 来 开发 真正 原生 泻 染 的 i0S 和 Android 移动 应 用 的 JavaScript 框架 。 
它 基 于 Facebook 公司 开源 的 JavaScript 用 户 界面 开发 框架 React 而 产生 ， 但 React 将 浏览 
器 作为 演 染 平台 ， 而 React Native 的 演 染 平台 则 是 移动 设备 。 也 就 是 说 ，Web 开发 者 现在 
就 可 以 使 用 我 们 非常 熟悉 的 JavaScript 类 库 来 开发 真正 原生 的 移动 应 用 。 并 且 ， 由 于 编写 
的 大 部 分 代码 可 以 在 平台 之 间 共 享 ，React Native 可 以 让 你 更 简单 地 同步 开发 Android 和 
iOS 应 用 。 

















与 Web 平台 上 的 React 相似 ，React Native 也 使 用 JSX 语法 进行 开发 ， 这 种 语法 结合 
了 JavaScript 和 类 XML 标记 语言 。React Native 在 后 台 通 过 “桥接 ”的 方式 ， 调 用 由 
Objective-C (iOS 平台 ) 或 Java (Android 平台 ) 开放 的 原生 泻 染 API， 因 此 ， 你 的 应 用 将 
使 用 真正 原生 的 移动 UI 组 件 进行 演 染 ， 而 不 是 传统 的 WebView 方式 ， 进 而 拥有 与 其 他 移 
动 应 用 一 样 的 外 观 和 体验 。 同 时 ，React Native 也 为 平台 上 的 API 开放 了 JavaScript API, 
让 你 的 应 用 能 够 使 用 平台 提供 的 功能 ， 例 如 摄像 头 和 用 户 定位 等 。 





























React Native 项 目的 核心 代码 实现 同时 支持 iOS 和 Android。 开 发 者 社区 还 提供 了 其 他 平台 
的 实现 支持 ， 包 括 Windows (https://github.com/Microsoft/react-native-windows), Ubuntu 
(https://github.com/CanonicalLtd/react-native) 和 Web (https://github.com/necolas/react-native-web) , 
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没 错 ， 你 完全 可 以 用 React Native 来 开发 用 于 正式 发 布 的 移动 应 用 。 据 了 解 ，Facebook、 
Airbnb, Walmart 和 百度 等 公司 ， 已 经 在 生产 环境 中 使 用 它 来 提供 面向 用 户 的 应 用 。 














1.1 React Native 的 优点 


事实 上 ，React Native 调用 宿主 平台 标准 泻 染 API 的 方式 已 经 使 它 从 其 他 现 有 的 跨 平台 应 
用 开发 方案 (比如 Cordova 或 Ionic) 中 脱颖而出 。 目 前 通过 编写 JavaScript. HTML 和 
CSS 的 方式 进行 应 用 开发 的 方案 大 多 使 用 WebView 进行 界面 泻 染 ， 当 然 这 种 方案 是 可 行 
的 ， 但 也 带 来 了 一 些 问题 ， 尤 其 是 性 能 损耗 。 同 时 ， 这 种 方案 通常 无 法 使 用 宿主 平台 的 原 
Æ UI 组 件 ， 所 以 这 些 框架 尝试 去 模仿 原生 UI 组 件 的 行为 ， 而 模仿 的 效果 通常 让 人 觉得 不 
够 真实 。 为 了 模仿 各 种 类 似 动画 这 样 的 细节 ， 一 般 都 要 付出 巨大 的 努力 ， 然 而 它们 很 快 又 
会 过 时 。 























相 比 之 下 ，React Native 则 将 你 的 代码 解析 成 真正 原生 的 UI 组 件 ， 利 用 了 所 用 平台 上 现 有 
的 视图 泻 染 方式 。 并 且 ， 由 于 React 不 在 UI 主线 程 中 运行 ， 你 的 应 用 可 以 在 不 牺牲 灵活 
性 的 前 提 下 保持 高 性 能 。React Native 的 生命 周期 与 React 相同 ， 当 属性 (props) 或 状态 
(state) 发 生 改 变 时 ，React Native 会 重新 演 染 视图 。 而 与 浏览 器 上 的 React 最 大 的 不 同 在 
F, React Native 使 用 了 宿主 平台 上 的 UI 元 素来 代替 HTML 和 CSS. 























对 于 习惯 了 Web 平台 的 React 开发 者 来 说 ， 这 意味 着 你 可 以 使 用 熟悉 的 工具 来 开发 真正 原 
生 的 移动 应 用 。 在 开发 者 体验 与 跨 平台 开发 等 方面 ，React Native 较 传统 的 移动 端 开发 来 
说 也 有 一 定 的 优势 。 


1.1.1 开发 者 体验 

如 果 你 曾经 有 过 移动 端的 开发 经 历 ， 将 会 对 React Native 的 易 用 性 感到 震惊 。React Native 
团队 已 经 研发 了 强大 的 开发 工具 ， 并 在 框架 内 租 入 了 友好 的 错误 提示 ， 因 此 使 用 这 些 强大 
的 工具 会 让 开发 体验 更 加 自然 。 

例如 ， 由 于 React Native“ 仅 ”使 用 了 JavaScript， 我 们 查看 修改 结果 时 不 需要 重新 编译 。 


相反 ， 只 需要 和 网 页 开发 一 样 ， 刷 新 应 用 即 可 。 在 传统 移动 端 开 发 中 ， 编 译 构建 应 用 所 花 
费 的 时 间 会 积 少 成 多 ， 相 比 之 下 React Native 的 快速 迭代 就 像 是 天 赐 之 福 。 










































































React Native 还 可 以 让 你 更 好 地 利用 智能 调试 工具 以 及 错误 报告 机 制 。 如 果 你 习惯 于 使 用 
Chrome 或 者 Safari 的 开发 工具 ( 见 图 1-1) ， 那 么 使 用 它们 进行 移动 开发 一 定 也 会 让 你 十 
分 愉悦 。 同 样 ， 你 可 以 选择 喜爱 的 任何 文本 编辑 器 来 开发 JavaScript。React Native 不 强制 
你 使 用 Xcode 进行 iOS 开发 ， 也 不 强制 使 用 Android Studio 进行 Android 开发 。 


























ese A = Plain 
React Native Debugger x i Bere Teeri mp 


Œ | © localhost:8081/debugger-ui wa: 





O Dark Theme O Maintain Priority 
React Native JS code runs as a web worker inside this tab. 


Press to open Developer Tools. Enable Pause On Caught Exceptions 
for a better debugging experience. 


You may also install the standalone version of React Developer Tools to inspect 
the React component hierarchy, their props, and state. 





Status: Debugger session #10009 active. 
Welcome to React Native! 


To get started, edit index.ios.js 
Press Cmd+R to reload, 
Cmd+D or shake for dev menu 








TR t] | Elements Console Sources Network Performance Memory Application » S x 
Fiter Infi 
ication Demo ({ RCTLog. js:43 
rops { 




















B 1-1: 使 用 Chrome 调试 器 开发 React Native 


除了 能 逐渐 改善 开发 者 体验 之 外 ，React Native 也 有 可 能 给 你 的 产品 发 布 周 期 带 来 一 些 积 
极 的 影响 。 例 如 ，Apple 公司 和 Google 公司 人 允许 通过 网 络 对 基于 JavaScript 开发 的 功能 
行 更 新 ， 无 须 额外 的 审核 周期 。 对 于 iOS 平台 来 说 这 非常 实用 ， 因 为 应 用 的 更 新 周期 通常 
需要 数 天 甚至 是 数 周 时 间 来 审核 。 


所 有 这 些小 福利 将 会 节省 你 和 你 的 伙伴 们 的 时 间 和 精力 ， 让 你 可 以 专注 于 工作 中 那些 更 有 
趣 的 部 分 ， 同 时 也 能 提高 你 的 工作 效率 。 


1.1.2 ”代码 复 用 与 知识 共享 

使 用 React Native 可 以 大 大 减少 开发 移动 应 用 所 需 的 资源 。 任 何 了 解 如 何 编写 React 的 
开发 者 现在 都 可 以 使 用 相同 的 技能 同时 开发 Web 应 用 、iOS 应 用 和 Android 应 用 。React 
Native 避免 了 按 平 台 分 工 的 必要 ， 可 以 让 你 的 团队 更 加 快速 地 友 代 产品 ， 并 更 加 高 效 地 共 
享 知 识 和 资源 。 


除了 知识 的 共享 之 外 ， 你 的 大 部 分 代码 也 可 以 被 共享 。 当 然 ， 并 非 你 写 的 所 有 代码 都 可 
以 做 到 跨 平 台 ， 这 取决 于 你 需要 在 特定 的 平台 上 实现 什么 功能 ， 你 可 能 偶尔 也 需要 涉及 
Objective-C 或 Java 的 知识 (我们 将 在 第 7 章 讲解 所 谓 的 本 地 模块 的 用 法 )。 使 用 React 
Native， 在 不 同 平台 之 间 复 用 代码 将 会 变 得 出 乎 意料 地 简单 。 例 如 ，Facebook Ads Manager 
这 款 Android 应 用 共享 了 其 iOS 版 本 87% 的 代码 。 另 外 ， 我 们 通过 本 书 完 成 的 一 款 闪 卡 应 
用 做 到 了 iOS 和 Android 代码 的 完全 复 用 。 这 是 很 难 超越 的 成 就 ! 
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1.2 ”风险 和 缺点 


就 像 世间 万 物 一 样 ，React Native 也 难免 存在 一 些 缺 点 ， 至 于 React Native 是 否 适合 你 的 团 
队 ， 则 取决 于 你 们 自身 的 情况 。 


由 于 React Native 在 项 目 中 会 引入 额外 的 一 层 ， 因 此 带 来 了 一 些 调试 上 的 麻烦 ， 尤 其 是 在 
React 和 宿主 平台 进行 交互 时 。 在 第 9 章 中 ， 我 们 会 深入 讨论 React Native 的 调试 ， 并 尝试 
解决 一 些 最 常见 的 问题 。 

















同样 ， 当 宿主 平台 发 布 更 新 时 一 一 例如 新 版 本 的 Android 发 布 了 一 套 新 的 API 时 一 一 要 让 
React Native 完全 支持 它 ， 会 有 一 定 的 请 后 时 间 。 好 消息 是 ， 在 绝 大 多 数 情况 下 ， 你 可 以 
自行 实现 对 缺失 的 API 的 支持 ， 我 们 会 在 第 7 章 中 说 明 。 此 外 ， 如 果 你 确实 遇 到 了 障碍 ， 
也 不 需要 被 React Native 框架 所 困 住 一 一 许多 公司 都 已 经 成 功 实现 了 混合 开发 应 用 的 方式 。 


在 编写 应 用 时 ， 选 择 平台 确实 是 一 项 非常 重要 的 抉择 。 不 过 总 体 来 说 ， 我 觉得 你 将 会 看 到 
它 带 来 的 收益 大 于 风险 。 


























1.3 ”小结 


React Native 是 一 款 振奋 人 心 的 框架 ， 它 使 得 Web 开发 者 可 以 使 用 他 们 现 有 的 JavaScript 
知识 开发 出 强大 的 移动 应 用 。 在 不 牺牲 用 户 体验 和 应 用 质量 的 前 提 下 ，React Native 提高 
了 开发 效率 ， 提 供 了 在 iOS. Android 和 Web 平台 上 的 代码 共享 。 由 于 它 会 让 你 的 应 用 安 
装 变 得 有 些 复杂 ， 你 在 使 用 时 需要 作 一 番 权 衡 。 如 果 你 的 团队 可 以 解决 这 一 问题 ， 并 且 想 
开发 跨 平台 的 应 用 ， 那 么 不 妨 试 试 React Native IE, 























在 下 一 章 中 ， 我 们 将 看 一 看 React Native 与 用 于 Web 平台 的 React 的 主要 区 别 ， 并 讲解 一 
些 关键 的 概念 。 如 果 你 想 跳 过 这 个 部 分 ， 可 以 直接 跳 到 第 3 章 的 实战 部 分 ， 第 3 章 会 从 开 
发 环境 的 搭建 讲 起 ， 着 手 开发 我 们 的 第 一 个 React Native 应 用 。 








第 2 章 
React Native 工 作 原 理 





在 本 章 中 ， 我 们 将 介绍 有 关 桥 接 的 知识 ， 了 解 React Native 在 后 台 是 如 何 工 作 的 ， 再 看 看 
React Native 组 件 与 Web 平台 上 的 组 件 有 何 区 别 ， 以 及 开发 移动 应 用 所 需 的 组 件 创建 与 样 
式 的 知识 。 











如 果 想 学 习 React Native 的 实战 部 分 ， 你 可 以 直接 跳 到 下 一 章 。 





2.1 React Native 是 如 何 工 作 的 


使 用 JavaScript 开发 移动 应 用 的 想法 可 能 有 些 奇 怪 。 在 移动 环境 中 使 用 React 是 怎样 实现 
的 呢 ? 为 了 更 好 地 理解 React Native 的 工作 原理 ， 我 们 首先 需要 回顾 一 下 React 的 一 个 特 
点 : Virtual DOM (虚拟 DOM)。 























在 React 中 ，Virtual DOM 就 像 是 一 个 中 间 层 ， 介 于 开发 者 描述 的 视图 与 实际 在 页 面 上 浑 
染 的 视图 之 间 。 为 了 在 浏览 器 上 演 染 出 可 交互 的 用 户 界面 ， 开 发 者 必须 操作 浏览 器 的 文档 
对 象 模型 (DOM, document object model) 。 这 个 操作 代价 昂贵 ， 对 DOM 的 过 度 操作 将 会 
给 性 能 带 来 严重 的 影响 。React 维护 了 一 个 内 存 版 本 的 DOM， 通 过 计算 得 出 必要 的 最 小 操 
作 并 重新 泻 染 。 图 2-1 展示 了 这 个 工作 过 程 。 









































i tr 


状态 改变 一 也 计 算 差 异 (Diff) 一 > pA 








We Be 


浏览 器 


DOM 














图 2-1; 执行 Virtual DOM 的 计算 ,减少 浏览 器 DOM 的 重复 泻 染 





对 于 Web 环境 的 React 而 言 ， 大 多 数 的 开发 者 认为 Virtual DOM 的 出 现 主 要 是 为 了 优化 性 
能 。Virtual DOM 确实 能 提升 性 能 ， 但 它 主要 的 潜力 在 于 提供 了 强大 的 抽象 能 力 。 在 开发 者 
的 代码 与 实际 的 演 染 之 间 加 入 一 个 抽象 层 ， 这 带 来 了 很 多 可 能 性 。 想 象 一 下 ， 如 果 React 能 
够 演 染 到 浏览 器 以 外 的 其 他 平台 呢 ? 毕 竞 ，React 已 经 “理解 ”了 你 的 应 用 应 该 如 何 展现 。 























确实 ， 这 就 是 React Native 的 工作 原理 ， 如 图 2-2 所 示 。React Native 调用 Objective-C 的 
API 去 泻 染 iOS 组 件 ， 调 用 Java API 去 演 染 Android 组 件 ， 而 不 是 泻 染 到 和 浏 览 器 DOM 上 。 
这 使 得 React Native 不 同 于 那些 基于 Web 视图 的 跨 平台 应 用 开发 方案 。 

















React Component 


render: function() { 
return <div>Hi!</div>; ReactJS 
} 










React Component 


render: function() { React 
return <View>Hi!</View>; Native 
} 











2-2; React 可 以 泻 染 到 多 平台 上 





桥接 令 这 一 切 成 为 可 能 ， 它 使 得 React 可 调用 宿主 平台 开放 的 UI 组 件 。React 组 件 通 过 
render 方法 返回 了 描述 界面 的 标记 代码 。 如 果 是 在 Web 平台 上 ，React 最 终 将 把 标记 代码 
解析 成 浏览 器 的 DOM， 而 在 React Native 中 ， 标 记 代码 会 被 解析 成 特定 平台 的 组 件 ， 例 如 




















<View> 将 会 表现 为 i0S 平台 上 的 UIView。 











React Native 目前 同时 支持 了 iOS 和 Android 两 种 平台 。 由 于 Virtual DOM 提供 了 抽象 
层 ，React Native 也 可 以 支持 其 他 平台 ， 只 需 为 其 提供 桥接 即 可 。 例 如 ， 开 发 者 社区 实现 
了 React Native 的 Windows (https://github.com/Microsoft/react-native-windows) 和 Ubuntu 
(https://github.com/CanonicalLtd/react-native) 版 本 ， 因 此 你 还 可 以 使 用 React Native 来 创建 
桌面 应 用 。 


2.2 泻 染 周期 


如 果 你 习惯 使 用 React， 那 你 应 该 熟悉 React 的 生命 周期 。 当 React 在 Web 环境 中 运行 时 ， 







































































泻 染 周期 始 于 React 组 件 挂 载 之 后 ( 见 图 2-3)。 


gon 挂 载 React 组 so 


























2-3; React 组 件 挂 载 过 程 
接着 ，React 进入 演 染 周期 并 根据 需要 演 染 组 件 ( 见 图 2-4)。 















计算 虚拟 me 
状态 /属性 改变 DOM 
的 差异 











图 2-4, React 组 件 重新 泻 染 过 程 
在 泻 染 阶段 ，React 将 开发 者 在 render 方法 中 返回 的 HTML 标记 直接 按 需 演 染 到 页 面 上 。 


至 于 React Native， 生 命 周期 与 React 基本 相同 ,但 泻 染 过 程 有 一 些 区 别 ， 因 为 React 
Native 依赖 于 桥接 ， 正 如 先前 图 2-2 所 示 。JavaScript 通过 桥接 的 解析 ， 间 接 调 用 宿主 平台 
的 基础 API 和 UI 元 素 ( 也 就 是 Objective-C 或 Java) 。 由 于 React Native 不 在 UI 主线 程 运 
行 ， 它 可 以 在 不 影响 用 户 体验 的 前 提 下 执行 这 些 异 步调 用 。 


2.3 # React Native 中 创建 组 件 


所 有 的 React 代码 都 存在 于 React 组 件 中 。React Native 组 件 与 React 组 件 大 体 上 一 至 但 
在 泻 染 和 样式 方面 有 一 些 重要 的 区 别 。 
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2.3.1 编写 视图 

当 编 写 Web 环境 的 React 时 ， 视 图 最 终 需 要 泻 染 成 普通 的 HTML 元 素 (<div>, <p>, 
<span>, <a> 等 )。 而 在 React Native 中 ， 所 有 的 元 素 都 将 被 平台 特定 的 React 组 件 所 替换 
( 见 表 2-1)。 最 基础 的 组 件 是 能 跨 平台 的 <Vview>， 这 是 一 个 简单 且 灵 活 的 UI 元 素 ， 类 似 于 
<div> 标签 。 例 如 ， 在 iOS 中 ，<View> 组 件 被 演 染 成 UIView， 而 在 Android 平台 上 则 被 这 
Yu pk View, 

















322-1: React5 React Native 基 础 元 素 的 比较 








React React Native 

<div> <View> 

<span> <Text> 

<li>, <ul> <FlastList> 中 的 子 条 目 
<img> <Image> 














其 他 组 件 则 是 平台 特定 的 。 例 如 ，<DatePickerI0S> 组 件 显然 将 被 泻 染 成 iOS 标准 的 日 期 
选择 器 ( 见 图 2-5)。 下 面 是 从 RNTester 示例 应 用 中 摘录 出 来 的 代码 ， 用 来 展示 iOS 日 期 
选择 器 。 正 如 你 期 待 的 那样 ， 用 法 相当 直观 : 





























<DatePickerI0OS 
date={this.state.date} 
mode="time" 


/> 





Today 2 33 PM 











@ 2-5; <DatepPickerI0S>， 顾 名 思 义 ， 是 iOS 特有 的 组 件 


我 们 所 有 的 UI 元 素 均 为 React 组 件 ， 而 不 是 像 <div> 这 样 基础 的 HIML 元 素 ， 因 此 我 们 在 
使 用 每 一 个 组 件 之 前 ， 都 需要 显 式 地 进行 导入 。 例 如 ， 我 们 可 以 这 样 导 入 <DatePicker10S> 
组 件 : 





import { DatePickerI0S } from "react-native"; 


RNTester 应 用 是 一 个 打包 的 标准 React Native 示例 (https://github.com/facebook/react-native/ 





tree/master/RNTester)， 可 以 让 你 查看 它 所 支持 的 所 有 UI 元 素 ， 建 议 你 体验 一 下 其 中 包含 
的 各 种 元 素 。 除 此 之 外 ， 它 还 讲解 了 许多 关于 样式 和 交互 的 知识 。 





平台 特定 的 元 素 和 API 在 官方 文档 中 有 特殊 的 标签 ， 通 常 使 用 平台 名 称 作为 
后 级 ， 例 如 <TabBarI0S> 和 <ToolbarAndroid>, 








这 些 组 件 因 平台 而 不 同 ， 因 此 在 使 用 React Native 时 ， 如 何 组 织 你 的 组 件 变 得 尤为 重要 。 











TE Web 环境 的 React 中 ， 我 们 通常 混合 各 种 React 组 件 ， 有 的 组 件 控制 逻辑 及 其 子 组 件 ， 





而 有 的 则 泻 染 原生 标记 。 在 使 用 React Native 时 ， 如 果 你 想 复 用 代码 ， 那 么 这 些 组 件 的 


抽象 分 离 就 至 关 重 要 。 当 然 ， 如 





果 一 个 组 件 演 染 <DatepPickerI0S> 元 素 ， 那 它 显 然 不 能 在 














Android 平台 复 用 了 。 不 过 ， 如 果 一 个 组 件 封 装 的 是 关联 逻辑 ， 那 就 可 以 被 复 用 。 因 此 ， 
视图 组 件 可 以 根据 平台 进行 替换 选择 。 如 果 你 乐意 的 话 ， 还 可 以 为 组 件 设 计 平 台 特 定 的 版 
本 ， 例 如 picker.ios.js 和 picker.android.js。 我 们 将 在 8.2 节 具 体 讲解 。 





2.3.2 ”使 用 JSX 





与 React 相 一 致 ，React Native 也 是 通过 编写 JSX 来 设计 视图 ， 并 将 视图 标记 和 控制 逻辑 组 
合 在 一 起 成 为 一 个 文件 。React 刚 问 世 的 时 候 ，JSX 在 业界 引起 了 强烈 的 反响 。 对 于 许多 
Web 开发 者 来 说 ， 根 据 技术 进行 文件 分 离 是 理所当然 的 : 保持 CSS. HTML 和 JavaScript 
文件 的 独立 。 然 而 将 标记 、 控 制 逻辑 ， 其 至 样式 合并 成 一 门 语言 难免 会 让 人 觉得 混乱 。 


JSX 认为 减少 心智 负担 比 文件 分 离 更 有 用 。 在 React Native 中 ， 这 一 点 表现 得 更 为 明显 。 




















在 一 个 没有 浏览 器 的 世界 里 ， 每 个 组 件 的 样式 、 标 记 和 行为 被 统一 成 单个 文件 的 形式 将 会 


HAE. Alt, React Native 中 的 js 文件 实际 上 就 是 ISX 文件 。 如 果 你 正在 使 用 原生 
JavaScript 编写 Web 环境 的 React， 你 可 以 考虑 转换 到 ISX 语法 来 编写 React Native 项 目 。 


假如 你 之 前 从 未 使 用 过 JSX， 也 不 用 太 担 心 ， 它 非常 简单 。 举 个 例子 ， 用 纯 JavaScript 编 





写 React 组 件 的 代码 看 起 来 如 下 : 





class HelloMessage extends React.Component { 


render() { 


return React.createELement( 


"div", 
null, 
"Hello ", 
this.props.name 
)3 
} 
} 


ReactDOM. render ( 


React.createELement(HelloMessage, { name: "Bonnie" }), mountNode); 
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我 们 可 以 通过 使 用 JSX 使 其 更 为 简洁 ， 使 用 类 XML 标记 来 代替 调 月 


方法 并 传人 一 组 HTML 属性 的 做 法 。 





H React .createELement 


class HelloMessage extends Component { 


render() { 
// 返回 





标记 ， 而 不 是 调 月 





月 createELement 方 法 


return <div>Hello {this.props.name}</div>; 


} 
} 


// 我 们 不 再 需要 调用 


ReactDOM.render(<HelloMessage name=" 
































以 上 两 段 代 码 最 终 都 会 在 页 











<div>Hello Bonnie</div> 


2.3.3 原生 组 件 的 样式 


createELement 方 法 


Bonnie" />, mountNode); 


看 上 被 演 染 为 下 面 的 HTML: 


在 Web 中 ， 正 如 使 用 HTML 标签 一 样 ， 我 们 仍然 使 用 CSS RH React 组 件 添加 样式 。 不 
论 你 是 否 喜欢 CSS， 它 都 已 经 成 为 Web 开发 不 可 或 缺 的 一 部 分 。React 通常 不 影响 我 们 编 
写 CSS 的 方式 ， 并 且 它 确实 让 样式 的 动态 创建 (通过 props 和 state) 更 加 容易 。 除 此 之 








yh, React 基本 上 不 关心 我 们 是 如 何 处 理 档 
JE Web 平台 上 有 大 量 的 方法 来 处 理 








ERI. 


布局 和 样式 。 但 好 在 我 们 使 用 React Native 时 ， 只 需要 





用 一 种 标准 的 方法 来 处 理 样式 。React 和 宿主 平台 之 间 的 桥接 包含 了 一 个 缩减 版 CSS 子 集 








的 实现 。 这 个 CSS 子 集 主要 通过 flexbox 进行 布局 ， 做 到 了 尽量 简 


有 的 CSS 规则 。 有 别 于 Web 平台 ，CSS 





单 化 ， 而 不 是 去 实现 所 
而 不 同 ，React Native 则 做 





We na 


DL AF 





HY Se F FE BE A A 








到 了 样式 规则 的 一 致 。 在 React Native 配套 的 RNTester 应 用 中 不 仅 可 以 查看 许多 UI 元 素 ， 








还 能 看 到 许多 支持 的 样式 例子 。 


React Native 也 坚持 使 用 内 联 样式 ， 通 过 JavaScript 对 象 进行 样式 组 织 。React 团队 先前 也 








提倡 在 Web 环境 的 React 中 使 用 内 联 样式 。 如 果 你 曾经 在 React 中 使 月 








下 面 的 语法 你 一 定 非常 熟悉 了 : 











// 定义 一 个 样式 
const style = { 
backgroundColor: 
fontSize: '16px' 
J}; 


// 然后 使 用 它 
const txt = ( 
<Text style={style}> 
A styled Text 
</Text>); 


'white', 





过 内 联 样式 ， 那 么 
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为 了 让 样式 更 容易 管理 ，React Native 为 我 们 提供 了 创建 和 扩展 样式 的 工具 。 我 们 将 在 第 5 


音 探 索 这 部 分 内 容 。 








内 联 样 式 的 写法 让 你 觉得 难受 ? 它 基 于 Web 背景 而 产生 ， 被 公认 为 标准 实践 的 一 个 突破 。 
相对 于 样式 表 来 说 ， 使 用 样式 对 象 可 能 需要 一 些 思维 上 的 调整 ， 从 而 改变 你 编写 样式 的 方 
法 。 然 而 ， 在 React Native 中 ， 这 是 一 个 实用 的 转变 。 我 们 将 在 第 5 章 讨论 编写 样式 的 最 
佳 实践 和 工作 流程 ， 你 很 难 不 对 它 的 实际 使 用 效果 感到 惊讶 ! 









































2.4 宿主 平台 API 


使 用 Web 环境 的 React 与 React Native 最 大 的 不 同 ， 应 该 就 在 于 宿主 平台 的 API 了 。 在 
Web 中 ， 我 们 通常 要 处 理 采 纳 标 准 的 不 一 致 和 碎片 化 所 引起 的 问题 ， 并 且 大 多 数 浏览 器 只 
支持 部 分 核心 的 特性 。 然 而 在 React Native 中 ， 平 台 特 定 的 API 在 提供 优秀 原生 的 用 户 体 
验方 面 发 挥 了 巨大 的 作用 。 当 然 ， 要 考虑 的 方面 还 有 很 多 。API AR CUPS ARE, MEHR 
存储 到 地 理 服 务 ， 以 及 操控 硬件 设备 〈 如 摄像 头 ) 等 。 非 常规 平台 上 的 API 会 更 有 趣 ， 例 
如 ，React Native 和 虚拟 现实 头盔 之 间 的 API 会 是 什么 样 的 呢 ? 



























































默认 情况 下 ，iOS 和 Android 版 本 的 React Native 支持 许多 常用 的 特性 ， 甚 至 可 以 支持 任何 
异步 的 本 地 API， 本 书 中 将 会 涉及 这 些 内 容 。React Native 让 宿主 平台 API 的 使 用 变 得 更 
加 简单 和 直观 ， 你 可 以 在 其 中 自由 地 试验 。 同 时 ， 务 必 思 考 一 下 怎样 做 才 符 合 目标 平台 的 
体验 ， 并 在 心里 设计 好 交互 过 程 。 



































HEAS, React Native 的 桥接 不 可 能 暴露 宿主 平台 全 部 的 API。 如 果 你 需要 使 用 一 个 未 支 
持 的 特性 ， 完 全 可 以 自己 动手 添加 到 React Native 中 。 另 外 ， 如 果 其 他 人 已 经 集成 ， 那 就 
更 好 了 ， 所 以 应 该 及 时 查看 社区 中 的 实现 。 我 们 将 在 第 7 章 讨论 这 部 分 知识 。 












































值得 注意 的 是 ， 使 用 平台 API 也 会 对 代码 复 用 有 和 帮助。 同时， 实现 平台 特定 功能 的 React 
组 件 也 是 平台 特定 的 。 隔 离 和 封装 这 些 组 件 将 会 给 你 的 应 用 带 来 更 大 的 灵活 性 。 当 然 ， 
这 对 你 开发 Web 应 用 同样 和 奏效， 如果 你 想 共 享 React 和 React Native 的 代码 ， 请 记 住 像 
DOM 这 样 的 API 在 React Native 中 并 不 存在 。 

















2.5 “小 结 


使 用 React Native 为 移动 应 用 编写 组 件 与 Web 环境 的 React 相 比 有 一 些 不 同 。JSX 是 强 
制 使 用 的 ， 并且 我 们 通过 创建 组 件 的 方式 来 开发 基本 模块 ， 比 如 <View> 代替 了 <div> 这 
个 HTML 元 素 。 样 式 方面 也 不 太一 样 ， 我 们 通过 使 用 CSS 的 子 集 编写 内 联 语 句 的 方式 来 
编写 样式 。 当 然 ， 这 些 调整 都 能 得 到 很 好 的 把 控 。 在 下 一 章 中 ， 我 们 将 动手 编写 第 一 个 
移动 应 用 ! 
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AIS 


构建 你 的 第 一 个 应 用 








本 章 将 讲解 如 何 搭建 React Native 开发 环境 以 及 如 何 构建 一 个 简单 的 应 用 ， 并 将 其 部 署 到 
4 LW iOS 或 Android 移动 设备 上 。 




















3.1 搭建 环境 

搭建 开发 环境 让 你 可 以 跟着 本 书 的 例子 一 起 学 习 并 开发 你 自己 的 应 用 。 

有 两 种 通用 的 方式 可 以 建立 React Native 的 开发 环境 。 第 一 种 是 使 用 Create React Native 
App 工具 ， 这 款 工 具 可 以 让 你 便捷 地 进行 安装 ， 但 是 只 支持 纯 JavaScript 应 用 。 第 二 种 更 
加 传统 的 方式 是 完整 安装 React Native 和 它 的 所 有 依赖 。 可 以 把 Create React Native App 当 
作 一 种 快捷 的 方式 ， 用 来 轻松 进行 测试 和 原型 制作 。 


在 附录 C 中 可 以 找到 关于 如 何 从 Create React Native App 迁移 到 完整 的 React Native 项 目的 
内 容 。 

















应 该 选择 哪 种 方式 ? 我 建议 初学 者 选择 Create React Native App， 这 种 方式 更 
加 适合 教学 和 快速 原型 。 

到 最 后 ， 如 果 你 要 专业 开发 一 款 React Native 应 用 ， 或 者 编写 一 款 同时 使 用 
JavaScript 及 原生 Java, Objective-C 或 者 Swift 代码 的 混合 应 用 ， 你 就 需要 安 
装 完 整 的 React Native 项 目 。 





























这 两 种 方式 接 下 来 都 会 介绍 。 后 续 章 市 中 的 示例 代码 通常 是 可 以 在 其 中 任何 一 种 方式 中 工 
作 的 。 当 某 些 代码 不 兼容 Create React Native App 并 且 需 要 完整 的 React Native 项 目 时 ,会 
加 以 说 明 。 
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3.2 ”使 用 Create React Native App 进 行 开发 配置 


Create React Native App (https://github. Sn en ee a ee 是 一 个 
可 以 快速 创建 并 运行 React Native 应 用 的 命令 行 工具 ， 无 须 安装 Xcode KA Android Studio 
即 可 运行 。 


如 果 你 想 要 快速 上 手 运行 ， 那 么 使 用 Create React Native App 就 是 正确 的 选择 。 





Create React Native App 这 款 工具 很 棒 ， 但 是 正如 前 面 提 到 的 ， 它 只 支持 纯 
JavaScript 的 应 用 。 在 本 书后 面 ， 我 们 将 讨论 如 何 将 React Native 应 用 和 使 用 
Java 或 者 Objective-C 编写 的 原生 代码 集成 到 一 起 。 别 担心 ， 如 果 你 从 Create 
React Native App 开始 ， 依 然 可 以 转变 成 一 个 完整 的 React Native 应 用 。 

















首先 ， 我 们 要 从 npm 安装 create-react-native-app 包 。React Native 使 用 npm 来 管理 依赖 ， 
npm 是 Node.js 的 包 管 理 器 。 不 仅 是 Node 环境 ， 在 npm registry 中 还 包含 了 各 种 JavaScript 
项 目 包 。 























npm install -g create-react-native-app 


3.2.1 使 用 create-react-native-app 创 建 你 的 第 一 个 应 用 


要 使 用 Create React Native App 创建 一 个 新 项 目 ， 只 需要 运行 下 列 命令 : 


create-react-native-app first-project 





这 条 命令 会 安装 一 些 JavaScript 依赖 ， 以 及 应 用 的 模板 代码 。 项 目 目录 看 起 来 应 该 如 下 所 示 : 


上 六 App.js 

| 一 App.test.js 
|— README. md 
| 一 app.json 

| 一 node_modules 
| 一 package.json 
L— yarn.Lock 











个 结构 看 起 来 像 是 一 个 简单 的 JavaScript 项 目 。 其 中 package.json 包含 了 项 目的 元 数据 ， 
以 及 项 目的 依赖 。README.md 文件 包含 了 运行 项 目 相 关 的 信息 。App.testjs 中 包含 了 一 
个 简单 的 测试 文件 。 应 用 代码 位 于 App.js。 要 修改 这 个 项 目 ， 并 构建 你 自己 的 应 用 ， 你 需 
要 从 App.js AF. 


在 3.5 节 中 ， 我 们 会 开始 构建 天 气 应 用 ， 届 时 会 更 加 详细 地 介绍 这 段 代码 所 做 的 事情 。 
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3.2.2 ”在 iOS 或 者 Android 中 预览 应 用 














太 棒 了 一 一 现在 你 的 应 用 已 经 准备 好 测试 了 。 要 运行 应 用 ， 在 命令 行 中 输入 : 











cd first-project 
npm start 


你 应 该 就 能 够 看 到 图 3-1 所 示 的 屏幕 





: Starting packager... 


To view your app with live reloading, point the Expo app to this QR code. 
You'll find the QR scanner on the Projects tab of the app. 


5 
加 


Or enter this address in the Expo app's search bar: 






Your phone will need to be on the same local network as this computer. 











B 3-1; 使 用 二 维 码 预览 Create React Native App 


要 查看 你 的 应 用 ， 你 需要 先 安装 Expo 应 用 (https://expo.io/) AY iOS 或 者 Android 版 本 。 
安装 之 后 ， 将 手机 摄像 头 对 准 二 维 码 ，React Native 应 用 就 能 够 加 载 出 来 。 注 意 ， 手 机 和 














电脑 需要 在 同一 个 网 络 中 ， 并 且 能 够 互相 通信 。 





恭喜 你 ! 现在 你 已 经 创建 了 第 一 个 React Native 应 用 ， 进 行 编译 ， 并 运行 在 真实 的 设备 上 。 




















始 编程 ， 可 以 直接 跳 到 3.4 “5. 





在 下 一 节 中 ， 我 们 将 会 介绍 如 何 进行 React Native 完整 、 传 统 的 安装 。 如 果 你 汶 





ELIT 








| ee 
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3.3 ”使 用 传统 方式 进行 开发 配置 


在 React Native 官方 文档 中 ， 可 以 查看 安装 React Native 及 其 所 有 依赖 的 指引 























你 可 以 使 用 Windows, macOS 或 者 Linux 来 开发 React Native 应 用 。 然 而 ， 开 发 iOS 应 用 
只 能 使 用 macOS。Linux 和 Windows 用 户 依然 可 以 使 用 React Native 来 编写 Android 应 用 。 
因为 安装 指令 随 着 平台 和 React Native 版 本 更 新 而 变化 ， 所 以 在 这 里 我 们 不 会 详细 介绍 它 
们 ， 但 是 你 需要 安装 以 下 内 容 : 

















e node.js 

e React Native 

。 iOS 开发 环境 (Xcode) 

。 Android 开发 环境 (IDK, Android SDK, Android Studio) 
































如 果 你 不 想 同 时 安装 iOS 和 Android 开发 者 工具 ， 那 也 可 以 ， 只 要 确保 已 经 安装 其 中 一 种 
平台 就 足够 了 。 


3.3.1 使 用 react-native 创 建 第 一 个 应 用 


你 可 以 使 用 React Native 命令 行 工具 创建 一 个 新 应 用 。 运 行 以 下 命令 ， 即 可 安装 这 个 命令 
行 工 具 : 











npm install -g react-native-cli 


现在 ， 我 们 可 以 通过 运行 以 下 命令 ， 生 成 一 个 新 的 项 目 ， 同 时 包括 React Native, iOS 和 
Android 的 模板 代码 : 


react-native init FirstProject 


生成 的 目录 结构 应 该 类 似 于 这 样 : 





— __tests__ 

android 

app. json 
index.android.js 
index.ios.js 

io 

we modules 

ļ— package. json 

L— yarn. lock 


| 一 
| 一 
| 一 
| 一 
| 一 
| 一 


ios/ 和 android/ 目录 包含 了 这 些 平台 对 应 的 模板 。 你 的 React 代码 放置 在 index.ios.js 和 
index.android.js 文件 之 中 ,分 别 是 React 应 用 不 同 平台 的 入 口 点 。 通 过 npm 安装 的 依赖 文 
件 通 常会 被 放 在 node_modules/ 目录 下 。 
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3.3.2 ”在 iOS 平 台 运 行 React Native 应 用 


要 在 iOS 平台 上 运行 应 用 ， 首 先 我 们 要 进入 新 创建 的 项 目 目 录 。 随 后 ， 你 可 以 像 这 样 运行 
React Native 应 用 : 


cd FirstProject 
react-native run-ios 


或 者 你 可 以 在 Xcode 中 打开 应 用 ， 并 从 这 里 运行 iOS 模拟 器 


open ios/FirstProject.xcodeproj 

















你 还 可 以 使 用 Xcode， 将 应 用 上 传 到 真实 设备 用 户 测试 。 要 实现 这 一 点 ， 你 需要 一 个 免费 
的 Apple ID， 用 来 配置 代码 签名 。 


要 配置 代码 签名 ， 可 以 在 Xcode 的 项 目 导 航 中 选择 你 的 主要 目标 ， 也 就 是 与 项 目 同名 的 
那 一 项 。 下 一 步 ， 点 击 General 标签 。 在 Signing 菜单 下 面 的 Team 下 拉 菜 单 中 ,选择 你 的 
Apple 开发 者 账号 OLE 3-2) 。 随 后 你 还 需要 为 测试 目标 重复 同样 的 步骤 。 





















































@ Xcode File Edit View Find Navigate Editor Product Debug Source Control Window Help 60 @ [J 会 p) 
(J @ b ÀA [| lagomorphical Finished running FirstProject on lagomor.. ñ 95 @ 4 = 0lelo a 1 
Hao 48) GN ep | 图 & FirstProject <a> 
7 ` FirstProject d Genera Resource Tags Info Build Settings Build Phases Build Rules 
FirstProject 
4 PROJECT , 
> Libraries Y Testing 
A ; 入 FirstProject 
> |) FirstProjectTests M 


Host Application À FirstProject B 
> Products TARGETS 


© Allow testing Host Application APIs 
A FirstProject a s ji 


FirstProjectTests 
EPR 
A FirstProject-tvOS Signing 


FirstProject-tvOSTe... © Automatically manage signing 
Xcode will create and update profiles 


Team Bonnie Eisenman (Personal Team) B 
Provisioning Profile None Required 


Signing Certificate iPhone Developer: Bonnie Eisenman (P3M22E583... 











图 3-2: 在 XCode 中 选择 团队 ， 让 你 可 以 在 物理 设备 上 测试 应 用 


当 你 第 一 次 尝试 在 某 台 设备 上 运行 应 用 时 ，XCode 会 提示 你 登录 Apple 账号 ， 并 注册 你 的 
设备 用 于 开发 。 


要 了 解 更 多 关于 如 何在 真实 iOS 设备 上 运行 应 用 的 细节 ， 可 以 参考 Apple 的 官方 文档 
(https://help.apple.com/xcode/mac/current/#/dev60b6fbbc7 ) 。 


请 注意 ， 你 的 iOS 设备 和 电脑 必须 处 于 同一 网 络 ， 才 能 运行 你 的 应 用 。 








3.3.3 在 Android 平 台 运 行 React Native 应 用 


为 了 在 Android 平台 运行 React Native 应 用 ， 需 要 安装 完整 的 Android 开发 环境 ， 其 中 包括 
Android Studio 以 及 Android SDK。 这 份 入 门 文档 (https://facebook.github.io/react-native/docs/ 
getting-started.html) 中 可 以 看 到 Android 依赖 的 列表 。 




















要 在 Android 上 运行 React Native， 可 以 输入 : 
react-native run-android 


你 还 可 以 在 Android Studio 中 打开 应 用 ， 并 从 那里 运行 。 

















此 外 ， 你 还 可 以 在 Android 模拟 器 或 者 USB 连接 的 物理 设备 上 运行 应 用 。 要 在 物理 设备 
上 运行 ， 你 需要 在 设备 的 开发 者 选项 中 启用 USB 调试 。 更 多 的 细节 指引 ， 请 参考 Android 
Studio 文档 (https://developer.android.com/studio/debug/dev-options.html) 。 


3.4 探索 示例 代码 


我 们 已 经 运行 并 部 署 了 默认 的 应 用 程序 ， 接 下 来 看 看 它 是 如 何 工作 的 。 在 这 一 节 中 ， 我 们 
将 深入 到 默认 应 用 的 源 代码 中 去 探索 React Native 项 目的 结构 。 























如 果 你 用 的 是 Create React Native App, FTIF App.js 文件 ( 见 例 3-1)。 如 果 你 使 用 的 是 完 
整 的 React Native 项 目 ， 打 开 index.ios.js 或 者 index.android.js ( 见 例 3-2)。 





例 3-1 为 Create React Native App 项 目 创建 的 App.js 初始 代码 


import React from "react"; 
import { StyleSheet, Text, View } from "react-native"; 


export default class App extends React.Component { 
render() { 
return ( 
<View style={styles. container }> 
<Text>Hello, world!</Text> 
</View> 
)3 
} 
} 


const styles = StyleSheet.create({ 
container: { 
flex: 1, 
backgroundColor: "#fff", 
alignItems: "center", 
justifyContent: "center" 


} 
}); 
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例 3-2 为 React Native 完整 项 目 创建 的 index.ios.js 和 index.android.js 初始 代码 
import React, { Component } from 'react'; 
import { 
AppRegistry, 
StyleSheet, 
Text, 
View 
} from 'react-native'; 


export default class FirstProject extends Component { 
render() { 
return ( 
<View style={styles.container}> 
<Text style={styles.welcome}> 
Welcome to React Native! 
</Text> 
<Text style={styles.instructions}> 
To get started, edit index.ios.js 
</Text> 
<Text style={styles.instructions}> 
Press Cmd+R to reload,{'\n'} 
Cmd+D or shake for dev menu 
</Text> 
</View> 
)3 
} 
} 


const styles = StyleSheet.create({ 
container: { 
flex: 1, 
justifyContent: 'center', 
alignItems: 'center', 
backgroundColor: '#F5FCFF', 
}， 
welcome: { 
fontSize: 20, 
textAlign: ‘center’, 
margin: 10, 
}， 
instructions: { 
textAlign: "center ' ， 
color: '#333333', 
marginBottom: 5, 
}， 
}); 


AppRegistry.registerComponent('FirstProject', () => FirstProject); 





不 管 你 用 的 是 哪 一 种 ， 让 我 们 来 谈 谈 这 里 发 生 的 


linl 


i. 








正如 你 在 例 3-3 中 所 看 到 的 那样 ，import 语句 的 使 用 方式 ， 和 基于 Web 的 React 项 目 相 


Lk, 





可 能 会 有 一 点 不 同 。 


例 3-3 在 ReactNative 中 导入 UI 元 素 


import React, { Component } from "react"; 
import { 

StyleSheet, 

Text, 

View 
} from "react-native"; 





EÉ 











的 语法 挺 有 趣 的 。 我 们 通过 require 语句 导入 了 React， 但 是 下 一 行 代码 发 生 了 什么 呢 ? 


React Native 的 使 用 方面 有 一 点 比较 奇特 ， 那 就 是 你 要 导入 所 需 的 每 一 个 组 件 或 模块 。 诸 
如 <div> 之 类 的 标签 是 不 存在 的 ， 如 果 你 需要 使 用 <View> 和 <Text> 等 组 件 ， 就 要 逐一 导 


入 。 像 Stylesheet 和 AppRegistry 这 样 的 库 函 数 也 需要 使 用 以 上 语法 导入 。 一 旦 开始 玫 
自己 的 应 用 ， 我 们 就 会 探索 React Native 提供 的 其 他 库 函 数 ， 同 样 也 是 需要 导入 才能 使 月 











如 果 你 不 熟悉 这 些 语 法 ， 可 以 在 附录 A 中 查看 例 A-4， 它 解释 了 ES6 的 解构 特性 。 
接 下 来 看 看 例 3-4 中 的 组 件 类 。 这 些 代码 看 起 来 亲切 而 熟悉 ， 因 为 它 就 是 普通 的 React 组 


件 。 











主要 的 区 别 是 ， 它 使 用 了 <Text> 和 <View> HERE T <div> 和 <span>， 并 使 用 了 样 








例 3-4 带 有 样式 的 FirstProject 组 件 


export default class FirstProject extends Component { 
render() { 
return ( 
<View style={styles.container}> 
<Text style={styles.welcome}> 
Welcome to React Native! 
</Text> 
<Text style={styles.instructions}> 
To get started, edit index.ios.js 
</Text> 
<Text style={styles.instructions}> 
Press Cmd+R to reload,{'\n'} 
Cmd+D or shake for dev menu 
</Text> 
</View> 
)3 
} 
} 


const styles = StyleSheet.create({ 
container: { 
flex: 1, 
justifyContent: 'center', 





发 





H. 
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alignItems: 'center', 
backgroundColor: '#F5FCFF', 
}， 
welcome: { 
fontSize: 20, 
textAlign: 'center', 
margin: 10, 
}， 
instructions: { 
textAlign: 'center', 
color: '#333333', 
marginBottom: 5, 
}, 
p; 


正如 之 前 所 提 到 的 ，React Native 中 所 有 的 样式 都 采用 样式 对 象 来 代替 传统 的 样式 表 ， 标 
准 的 做 法 就 是 利用 StyleSheet 库 进行 样式 的 编写 。 你 可 以 在 文件 的 底部 看 到 样式 对 象 是 如 
何 定义 的 。 需 要 注意 的 是 ，<Text> 组 件 可 以 使 用 文本 特有 的 属性 ， 如 fontSize， 而 所 有 的 
布局 样式 都 使 用 fexbox。 我 们 将 在 第 5 章 用 更 多 篇 幅 介 绍 布局 。 























该 示例 应 用 很 好 地 介绍 了 创建 React Native 应 用 的 一 些 基 本 函数 。 它 挂 载 了 React 组 件 用 
于 渲染 ， 并 介绍 了 React Native 的 基本 样式 和 演 染 逻辑 。 我 们 还 尝试 将 应 用 部 署 到 真实 设 
备 上 。 但 它 依然 是 一 个 极其 基础 的 缺乏 用 户 交 互 的 应 用 ， 接 下 来 让 我 们 党 试 开发 一 个 有 更 
多 功能 的 应 用 吧 。 


3.5 开发 天 气 应 用 


本 节 中 ， 我 们 将 使 用 示例 程序 来 开发 天 气 应 用 。 这 个 项 目 包 括 如 何 利 用 和 结合 样式 表 、 
flexbox、 网 络 通信 、 用 户 输 入 和 图 像 显 示 等 知识 来 开发 一 个 实用 的 应 用 程序 ， 然 后 将 其 部 
署 到 Android 或 iOS 设备 上 。 


这 部 分 内 容 可 能 会 有 些 含糊 不 清 ， 因 为 我 们 主要 把 精力 集中 在 这 些 特 性 的 用 法 上 ， 而 不 是 
深入 分 析 它 们 。 不 用 担心 进度 太 快 ， 在 后 续 的 章节 中 ， 我 们 会 将 这 个 天 气 应 用 作为 参考 并 
深入 讨论 这 些 特性 。 















































天 气 应 用 最 终 的 界面 如 图 3-3 所 示 ， 用 户 可 以 通过 文本 框 输入 邮编 进行 查询 。 该 应 用 利用 
OpenWeatherMap 的 API 获取 数据 并 展现 当前 天 气 情况 。 























Carrier > 10:27 PM = 


Current wea 


Clouds 


conditions: scattered clouds 














图 3-3: 天 气 应 用 成 品 


我 们 要 做 的 第 一 件 事 就 是 在 示例 应 用 中 替换 默认 的 代码 。 将 初始 组 件 的 代码 移动 到 
WeatherProject.js 中 。 








如 果 你 创建 的 是 完整 的 React Native 项 目 ， 请 修改 index.ios.js 和 index.android.js 文件 的 内 
容 ， 如 例 3-5 所 示 。 


例 3-5 精简 后 的 index.ios.js 和 index.android.js 代码 (二 者 保持 一 致 ) 
import { AppRegistry } from "react-native"; 
import WeatherProject from "./WeatherProject"; 
AppRegistry.registerComponent("WeatherProject", () => WeatherProject); 





类 似 地 ， 如 果 你 使 用 Create React Native App 创建 了 React Native 应 用 ， 就 需要 替换 App.js 
文件 中 的 内 容 ， 如 例 3-6 所 示 。 


例 3-6 精简 后 的 App.js 内 容 ， 用 于 Create React Native App 项 目 


import WeatherProject from "./WeatherProject"; 
export default WeatherProject; 


3.5.1 AMBER ARIA 
我 们 希望 用 户 通 过 输入 邮编 获取 该 地 区 的 天 气 预报 ， 因 此 需要 添加 一 个 输入 框 提供 给 用 
户 。 首 先 ， 添 加 默认 邮编 信息 至 组 件 的 初始 状态 中 ( 见 例 3-7) 。 
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例 3-7 在 render 国 数 前 加 入 这 段 邮 编 信息 代码 
constructor(props) { 
super (props); 
this.state = { zip: "" }; 


} 
如 果 你 已 经 习惯 了 使 用 React.createClass() 来 创建 组 件 ， 而 不 是 JavaScript 类 ， 可 能 会 
觉得 上 述 代码 很 奇怪 。 在 创建 组 件 类 时 ， 我 们 可 以 通过 在 constructor 方法 中 改变 this. 
state 变量 ， 并 设置 React 组 件 的 初始 state 状态 值 。 如 果 你 想 要 查看 组 件 的 生命 周期 ， 可 
以 参考 React 文档 (https://reactjs.org/docs/react-component.html) 。 
































接着 ， 修 改 其 中 一 个 <Text> 组 件 的 内 容 为 thts.state.ztp， 如 例 3-8 所 示 。 








例 3-8 添加 <Text> 组 件 ， 显 示 当 前 的 邮编 


<Text style={styles.welcome}> 
You input {this.state.zip}. 
</Text> 


我 们 用 同样 的 方式 添加 一 个 <TextInput> 组 件 ， 如 例 3-9 所 示 。 这 是 一 个 允许 用 户 输入 文 
本 的 基础 组 件 。 


例 3-9 添加 <Text> 组 件 ， 用 于 输入 文本 
<TextInput 
style={styles.input} 
onSubmitEditing={this._handleTextChange}/> 











这 个 <TextInput> 组 件 的 文档 和 属性 可 以 在 React Native 官网 查看 。 为 了 监听 一 些 事件 ， 你 
可 以 往 <TextInput> 中 传 入 回调 国 数 ， 如 onChange 和 onFocus， 但 现在 暂时 不 需要 这 么 做 。 


注意 ， 我 们 已 经 为 其 添加 了 样式 ，input 样式 表 如 下 : 











const styles = StyleSheet.create({ 


input: { 
fontSize: 20, 
borderWidth: 2, 
height: 40 

} 


Di 
我 们 通过 onSubmitEditing 属性 传递 的 回调 ， 应 当 作为 函数 添加 到 组 件 中 ， 如 例 3-10 所 示 。 








例 3-10 <TextInput> 的 handleText 回调 


_handleTextChange = event => { 
this.setState({zip: event.nativeEvent.text}) 








通过 使 用 箭头 函数 语法 ， 我 们 可 以 确保 回调 函数 能 够 正确 绑 定 到 函数 实例 中 。React SA 
动 绑 定 render 这 样 的 生命 周期 方法 ， 但 是 对 于 其 他 的 方法 ， 我 们 就 需要 注意 this 绑 定 的 
问题 。 箭 头 函 数 会 在 例 A-8 中 介绍 。 




















你 还 需要 更 新 import 语句， 如 例 3-11 所 示 。 


例 3-11 在 React Native 中 导入 UI 元 素 


import { 
TextInput 


} from "react-native"; 








现在 ,尝试 使 用 iOS 模拟 器 运行 你 的 应 用 。 它 可 能 不 是 很 美观 ， 但 你 应 该 可 以 成 功 地 输入 
一 个 邮编 并 显示 在 <Text> 组 件 上 。 











如 果 需 要 的 话 ， 也 可 以 对 用 户 的 输入 做 一 个 验证 来 确保 正确 输入 了 5 位 数字 ， 现 在 暂时 略 过 。 
例 3-12 展示 了 WeatherProject.js 组 件 的 完整 代码 。 


例 3-12 WeatherProject.js 的 这 个 版 本 简单 地 接收 并 记录 用 户 的 输入 


import React, { Component } from "react"; 





import { StyleSheet, Text, View, TextInput } from "react-native"; 


class WeatherProject extends Component { 
constructor(props) { 
super (props); 
this.state = { zip: "" }; 


} 


_handleTextChange = event => { 
this.setState({ zip: event.nativeEvent.text }); 


J; 


render() { 
return ( 
<View style={styles.container}> 
<Text style={styles.welcome}> 
You input {this.state.zip}. 
</Text> 
<TextInput 
style={styles.input} 
onSubmitEditing={this._handleTextChange} 
/> 
</View> 
)3 
} 
} 


const styles = StyleSheet.create({ 
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container: { 
flex: 1, 
justifyContent: "center", 
alignItems: "center", 
backgroundColor: "#FSFCFF" 
}, 
welcome: { fontSize: 20, textAlign: "center", margin: 10 }, 
input: { 
fontSize: 20, 
borderWidth: 2, 
padding: 2, 
height: 40, 
width: 100, 
textAlign: "center" 
} 
); 


export default WeatherProject; 


3.5.2 ”展现 数据 
现在 ， 我 们 来 开发 根据 邮编 查询 天 气 预 报 的 功能 。 首 先 添 加 一 些 mock 数据 (虚拟 的 数据 ) 
到 WeatherProject.js 文件 的 初始 状态 值 中 。 


constructor(props) { 
super(props); 
this.state = { zip: 


} 


为 了 让 程序 更 加 清晰 ， 我 们 把 天 气 预 报 分 离 成 一 个 单独 的 组 件 ， 新 建 一 个 名 为 Forecastjs 
的 文件 ( 见 例 3-13)。 


» forecast: null }; 


例 3-13 Forecast.js 中 的 <Forecast> 组 件 


import React, { Component } from "react"; 
import { StyleSheet, Text, View } from "react-native"; 


class Forecast extends Component { 
render() { 
return ( 
<View style={styles.container}> 
<Text style={styles.bigText}> 
{this.props.main} 
</Text> 
<Text style={styles.mainText}> 
Current conditions: {this.props.description} 
</Text> 
<Text style={styles.bigText}> 
{this.props.temp}°F 
</Text> 
</View> 


) ; 





} 
} 


const styles = StyleSheet.create({ 
container: { height: 130 }, 
bigText: { 
flex: 2, 
fontSize: 20, 
textAlign: "center", 
margin: 10, 
color: "#FFFFFF" 
}, 
mainText: { flex: 1, fontSize: 16, textAlign: "center", color: "#FFFFFF" } 


p; 


export default Forecast; 





<Forecast> 组 件 只 能 基于 它 的 属性 泻 染 一 些 <Text> 文本 ， 我 们 也 会 在 文件 的 末尾 添加 一 些 





简单 的 文本 颜色 之 类 的 样式 。 





导入 <Forecast> 组 件 并 添加 到 render 方法 中 ， 通 过 this.state. forecast 向 它 的 属性 传 入 











数据 ( 见 例 3-14)。 我 们 稍 后 会 解决 布局 和 样式 问题 。 你 能 在 图 3-4 看 到 <Forecast> 组 人 人 














最 终 显示 的 效果 。 


例 3-14 更 新 后 的 WeatherProject.js， 包 含 了 <Forecast> 组 件 


import React, { Component } from "react"; 


import { StyleSheet, Text, View, TextInput } from "react-native"; 
import Forecast from "./Forecast"; 


class WeatherProject extends Component { 

constructor(props) { 
super (props); 

this.state = { zip: 


} 


» forecast: null }; 


_handleTextChange = event => { 
this.setState({ zip: event.nativeEvent.text }); 


}; 
render() { 
let content = null; 
if (this.state.forecast !== null) { 
content = ( 
<Forecast 
main={this.state.forecast.main} 
description={this.state.forecast.description} 
temp={this.state.forecast.temp} 
/> 
); 
} 


33 
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return ( 
<View style={styles.container}> 
<Text style={styles.welcome}> 
You input {this.state.zip}. 
</Text> 
{content} 
<TextInput 
style={styles. input} 
onSubmitEditing={this._handleTextChange} 
/> 
</View> 
); 
} 
} 


const styles = StyleSheet.create({ 
container: { 
flex: 1, 
justifyContent: "center", 
alignItems: "center", 
backgroundColor: "#FSFCFF" 
} 
welcome: { fontSize: 20, textAlign: "center", margin: 10 }, 
input: { 
fontSize: 20, 
borderWidth: 2, 
padding: 2, 
height: 40, 
width: 100, 
textAlign: "center" 
} 
}); 


export default WeatherProject; 


因为 我 们 现在 还 没有 拿 到 需要 演 染 的 天 气 数据 ， 所 以 从 视觉 上 看 ， 应 该 还 没有 发 生变 化 。 


3.5.3 ”从 Web 获 取 数 据 

现在 ， 让 我 们 来 探索 使 用 React Native 中 可 用 的 API。 你 不 需要 使 用 jQuery 在 移动 设备 上 
RIX AJAX 请 求 ， 只 需要 使 用 React Native 实现 的 Fetch API 即 可 。 如 例 3-15 所 示 ， 这 个 
API 的 语法 基于 promise， 用 法 相当 简单 。 


























例 3-15 使 用 React Native Fetch API 


fetch('http://www.somesite.com') 
.then((response) => response.text()) 
.then((responseText) => { 
console. Log(responseText) ; 


H); 
如 果 你 还 不 习惯 promise 式 的 语法 ， 请 参见 附录 A 中 的 A.8 节 。 

















我 们 会 使 用 OpenWeatherMap API， 它 提供 了 简单 的 端点 ， 返 回 给 定 邮编 的 当前 天 气 。 这 
个 API 作为 一 个 轻 量 库 封装 在 open_weather_map.js 中 ， 如 例 3-16 所 示 。 








例 3-16 OpenWeatherMap 库 ， 来 自 src/weather/open_weather_map.js 


const WEATHER_API_KEY = "bbeb34ebf60ad50f7893e7440ale2b0b"; 
const API_STEM = "http://api.openweathermap.org/data/2.5/weather?"; 


function zipUrl(zip) { 
return “S{API_STEM}q=${zip}&units=imperial&APPID=${WEATHER_API_KEY}° ; 


} 


function fetchForecast(zip) { 
return fetch(zipUrl(zip)) 
.then(response => response. json()) 
.then(responseJSON => { 
return { 
main: responseJSON.weather[0].main, 
description: responseJSON.weather[0].description, 
temp: responseJSON.main. temp 
}; 
}) 
.catch(error => { 
console.error(error); 
}); 
} 


export default { fetchForecast: fetchForecast }; 
现在 ， 我 们 可 以 这 样 导 入 


import OpenWeatherMap from "./open_weather_map"; 





为 了 继承 这 个 API， 我 们 可 以 修改 <TextInput> 组 件 中 的 回调 函数 ， 让 其 查询 
OpenWeatherMap API， 如 例 3-17 所 示 。 


例 3-17 向 OpenWeatherMap API 请 求 数据 


_handleTextChange = event => { 
let zip = event.nativeEvent. text; 
OpenWeatherMap.fetchForecast(zip).then(forecast => { 
console. Log(forecast); 
this.setState({ forecast: forecast }); 
}); 
J; 


这 里 将 天 气 预报 的 信息 打印 到 控制 到 ， 这 对 于 我 们 来 说 非常 有 用 ， 要 了 解 更 多 关于 如 何 查 
看 控制 台 输 出 的 内 容 ， 请 参见 9.1.2 节 。 


最 后 ， 我 们 还 要 更 新 container 的 样式 ， 才 能 看 到 天 气 预报 文本 的 演 染 。 








container: { 
flex: 1, 
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justifyContent: "center", 

alignItems: "center", 

backgroundColor: "#666666" 
} 


现在 ， 当 你 输入 邮编 时 ， 应 该 就 能 看 到 天 气 预 报信 息 泻 染 出 来 〈 见 图 3-4). 








Clouds 


Current conditions: few clouds 
45.7°F 














3-4; 目前 的 天 气 应 用 
更 新 后 的 WeatherProject.js 代码 ， 展 示 在 例 3-18 中 。 





例 3-18 现在 WeatherProject.js 中 是 真实 数据 了 


import React, { Component } from "react"; 


import { StyleSheet, Text, View, TextInput } from "react-native"; 
import OpenWeatherMap from "./open_weather_map"; 
import Forecast from "./Forecast"; 


class WeatherProject extends Component { 

constructor(props) { 
super (props); 

this.state = { zip: 


» forecast: null }; 





_handleTextChange = event => { 
let zip = event.nativeEvent.text; 
OpenWeatherMap.fetchForecast(zip).then(forecast => { 
this.setState({ forecast: forecast }); 


]); 
}; 
render() { 
let content = null; 
if (this.state.forecast !== null) { 
content = ( 
<Forecast 
main={this.state.forecast.main} 
description={this.state.forecast.description} 
temp={this.state.forecast.temp} 
/> 
); 
} 
return ( 


<View style={styles.container}> 
<Text style={styles.welcome}> 
You input {this.state.zip}. 
</Text> 
{content} 
<TextInput 
style={styles.input} 
onSubmitEditing={this. handleTextChange} 
/> 
</View> 
); 
} 
} 


const styles = StyleSheet.create({ 
container: { 
flex: 1, 
justifyContent: "center", 
alignItems: "center", 
backgroundColor: "#666666" 
}, 
welcome: { fontSize: 20, textAlign: "center", margin: 10 }, 
input: { 
fontSize: 20, 
borderWidth: 2, 
padding: 2, 
height: 40, 
width: 100, 
textAlign: "center" 
} 
D; 


export default WeatherProject; 
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3.5.4 添加 背景 图 片 
单纯 的 背景 颜色 略 显 单调 。 我 们 接 下 来 为 其 添加 一 个 背景 图 片 。 


图 片 资源 的 管理 和 任何 其 他 的 代码 资源 非常 类 似 : 你 可 以 通过 require 调用 来 导入 图 片 。 
例如 要 使 用 flowers.png 作为 背景 图 片 的 话 ， 我 们 可 以 这 样 导入 : 























<Image source={require('./flowers.png')}/> 


这 个 图 片 文件 可 以 在 GitHub (https://github.com/bonniee/learning-react-native/blob/2.0.0/src/ 
weather/flowers.png) 中 获取 。 





和 JavaScript 资源 类 似 ， 如 果 你 同时 拥有 flowers.ios.png 和 flowers.android.png 两 个 文件 
的 话 ，React Native 打包 器 会 根据 平台 加 载 对 应 的 图 片 。 同 样 ， 你 可 以 使 用 @2x 和 @3x 后 级 ， 
为 不 同 的 屏幕 密度 提供 不 同 的 图 片 。 所 以 ， 假 设 我 们 可 以 像 这 样 构造 我 们 的 项 目 目录 : 


























— flowers.png 
— flowers@2x.png 
| — flowers@3x.png 


要 添加 背景 图 到 <View> 中 ， 我 们 不 能 像 Web 那样 ， 在 <div> 上 设置 background 属性 。 取 
而 代 之 的 做 法 是 ， 我 们 要 使 用 一 个 <Image> 组 件 作 为 容器 : 








<Image source={require('./flowers.png')} 
resizeMode='cover' 
style={styles.backdrop}> 
// 内 容 区 


</Image> 








<Image> 组 件 预期 接收 一 个 source 属性 ， 我 们 在 这 里 使 用 require 来 获取 值 。 














在 样式 中 ， 别 忘 了 使 用 flexpDirection， 让 其 子 节 点 可 以 按照 我 们 期 望 的 方式 进行 谊 染 : 








backdrop: { 
flex: 1, 
flexDirection: 'column' 


} 





现在 ， 我 们 在 <Image> 里 面 添加 一 些 子 市 点 。 在 <WeatherProject> 组 件 中 修改 render 方 
法 ， 让 其 返回 以 下 内 容 : 




















<View style={styles.container}> 
<Image 
source={require("./flowers.png")} 
resizeMode="cover" 
style={styles.backdrop}> 
<View style={styles.overLlay}> 
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<View style={styles.row}> 
<Text style={styles.mainText}> 
Current weather for 
</Text> 
<View style={styles.zipContainer }> 
<TextInput 
style={[styles.zipCode, styles.mainText]} 
onSubmitEditing={event => this._handleTextChange(event) } 
/> 
</View> 
</View> 
{content} 
</View> 
</Image> 
</View> 


你 会 注意 到 ， 我 使 用 了 一 些 还 没有 讨论 过 的 样式 ， 例 如 row, overlay, zipContainer, 
zipCode。 你 可 以 直接 跳 到 例 3-19， 查 看 完整 的 样式 表 。 





3.55 整合 
对 于 这 个 应 用 的 最 后 一 个 版 本 ， 我 重新 组 织 了 <WeatherProject> 组 件 的 render 函数 并 且 
调整 了 样式 。 最 大 的 改变 是 布局 逻辑 ， 如 图 3-5 所 示 。 
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flex: 1, 
alignitems: center 
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图 3-5: 天 气 应 用 最 终 的 布局 


好 ， 准 备 好 查看 整体 代码 了 吗 ? 例 3-19 展示 了 完成 之 后 的 <WeatherProject> 组 件 包 括 样 
式 表 在 内 的 完整 代码 。<Forecast> 组 件 仍 然 与 例 3-13 一 致 。 
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例 3-19 WeatherProject.js 完整 代码 


import React, { Component } from "react"; 


import { StyleSheet, Text, View, TextInput, Image } from "react-native"; 


./Forecast"; 
", /open_weather_map"; 


import Forecast from 
import OpenWeatherMap from 


class WeatherProject extends Component { 

constructor(props) { 
super(props); 

this.state = { zip: 


} 


, forecast: null }; 


_handleTextChange = event => { 
let zip = event.nativeEvent.text; 
OpenWeatherMap.fetchForecast(zip).then(forecast => { 
this.setState({ forecast: forecast }); 


}) 
}; 
render() { 
let content = null; 
if (this.state.forecast !== null) { 
content = ( 
<Forecast 
main={this.state.forecast.main} 
description={this.state.forecast.description} 
temp={this.state.forecast.temp} 
/> 
) ; 
} 
return ( 
<View style={styles.container}> 
<Image 


source={require("./flowers.png")} 
resizeMode="cover" 
style={styles. backdrop} 


<View style={styles.overlay}> 
<View style={styles.row}> 
<Text style={styles.mainText}> 
Current weather for 
</Text> 
<View style={styles.zipContainer }> 
<TextInput 
style={[styles.zipCode, styles.mainText]} 
onSubmitEditing={this._handleTextChange} 
under lineColorAndroid="transparent" 
/> 
</View> 
</View> 
{content} 
</View> 





</Image> 
</View> 
)3 
} 
} 


const baseFontSize = 16; 


const styles = StyleSheet.create({ 
container: { flex: 1, alignItems: "center", paddingTop: 30 }, 
backdrop: { flex: 1, flexDirection: "column" }, 
overlay: { 
paddingTop: 5, 
backgroundColor: "#000000", 
opacity: 0.5, 
flexDirection: "column", 
alignItems: "center" 
}, 
row: { 
flexDirection: "row", 
flexWrap: "nowrap", 
alignItems: "flex-start", 
padding: 30 
}, 
zipContainer: { 
height: baseFontSize + 10, 
borderBottomColor: "#DDDDDD", 
borderBottomWidth: 1, 
marginLeft: 5, 
marginTop: 3 
}, 
zipCode: { flex: 1, flexBasis: 1, width: 50, height: baseFontSize }, 
mainText: { fontSize: baseFontSize, color: "#FFFFFF" } 
}); 


export default WeatherProject; 





我 们 已 经 完成 了 所 有 的 工作 ， 现 在 尝试 运行 这 个 应 用 。 不 出 意外 的 话 ， 它 将 可 以 同时 运行 
在 Android Fl iOS 设备 上 ， 无 论 是 模拟 器 还 是 真实 物理 设备 皆 可 。 想 对 它 进行 修改 或 者 完 
善 吗 ? 























你 可 以 在 GitHub 仓库 查看 完整 的 代码 (https:// github.com/bonniee/learning-react-native/tree/ 
2.0.0/src/weather ) 。 


3.6 小结 


我 们 开发 的 第 一 个 应 用 涉及 了 很 多 知识 。 本 章 介绍 了 新 的 UI 组 件 <TextInput>， 以 及 如 何 
从 中 获取 用 户 输入 的 信息 。 接 下 来 本 章 解释 了 如 何在 React Native 中 编写 基本 样式 ， 以 及 
如 何在 应 用 中 加 载 并 使 用 图 片 。 最 后 本 章 讨论 了 如 何 使 用 React Native 网 络 API 从 外 部 网 
络 源 中 请 求 数据 。 对 于 我 们 的 第 一 个 应 用 ， 这 已 经 相当 不 错 了 ! 
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幸运 的 是 ， 这 足以 证 明 你 可 以 使 用 React Native 快速 地 开发 出 具有 原生 体验 的 、 功 能 丰富 
的 移动 应 用 。 


如 果 你 想 继续 扩展 这 个 应 用 ， 可 以 尝试 : 


。 添加 更 多 的 图 片 ， 并 根据 天 气 预报 更 换 图 片 ， 
。 对 邮编 进行 有 效 性 验证 ， 

。 切换 更 便捷 的 小 型 键盘 进行 邮编 输入 

。 展示 最 近 5 天 的 天 气 预报 。 


随 着 我 们 学 习 更 多 的 知识 ， 例 如 地 理 位 置 ， 你 将 可 以 为 天 气 应 用 扩展 更 多 的 功能 。 


当然 ， 这 只 是 一 个 快速 的 概览 。 在 后 面 几 章 中 ， 我 们 将 更 加 深入 地 了 解 React Native 的 最 
佳 实践 ， 并 学 习 使 用 更 多 的 特性 ! 
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移动 应 用 组 件 








在 第 3 章 中 ， 我 们 构建 了 一 个 简单 的 天 气 应 用 ， 并 从 中 学 习 了 创建 React Native 界面 的 基 
础 知识 。 在 本 章 中 ， 我 们 将 更 深入 地 了 解 React Native 的 移动 应 用 组 件 ， 并 将 其 与 基础 
HTML 元 素 进行 比较 。 相 比 于 网 页 ， 移动 界面 是 基于 各 种 不 同 的 原始 UI 元 素 而 构造 的 ， 
因此 我 们 需要 使 用 不 同 的 组 件 。 








在 本 章 的 开头 ， 我 们 将 详细 了 解 一 些 最 基础 的 组 件 ， 即 <View>, <Image> 和 <Text>， 然 后 
讨论 触摸 和 手势 怎样 作用 于 React Native 组 件 ， 并 了 解 如 何 处 理 触 摸 事 件 。 紧 接着 我 们 学 
习 一 些 更 高 阶 的 组 件 ， 例 如 <FlatList>, <SectionList> 和 <TabBarI0S>， 让 你 可 以 组 合 这 
些 视图 开发 出 符合 界面 规范 的 移动 应 用 。 


4.1 类 比 HTML 元 素 与 原生 组 件 


当 开 发 Web 应 用 时 ， 我 们 使 用 各 种 基础 的 HTML 元 素 ， 例 如 <div>, <span> 和 <img>, ih 
有 各 种 组 织 元 素 : <ol>, <ul> 和 <tabLe>。( 也 可 以 考虑 <audio>, <svg>, <canvas> 等 元 
素 ， 但 此 处 暂时 忽略 它们 。) 


在 React Native 中 ， 我 们 不 使 用 这 些 HTML 元 素 ， 但 使 用 类 似 它 们 的 各 种 组 件 ( 见 表 4-1). 
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34-1: 类 比 HTML 和 原生 组 件 





HTML React Native 

div <View> 

img <Image> 

span, p <Text> 

ul/ol, li <FlatList> 中 的 子 条 目 


虽然 这 些 元 素 的 作用 相似 ， 但 它们 不 可 以 相互 替换 。 让 我 们 来 看 这 些 组 件 是 如 何在 React 
Native 的 应 用 中 工作 的 ， 并 了 解 它们 与 浏览 器 场景 有 什么 区 别 。 








React Native 和 Web 应 用 的 代码 可 以 共享 吗 ? 
React Native 开 箱 即 用 ， 支 持 在 Android 和 iOS 中 渔业 。 如 果 你 想 要 使 用 React Native 72 3 
兼容 Web 的 视图 ， 可 以 参考 react-native-web (https://github.com/necolas/react-native-web) 。 
不 管 你 使 用 什么 方法 ， 任 何 JavaScript 的 代码 包括 React 组 件 一 一 只 要 没有 洽 染 基 
耐 元 素 ， 就 可 以 进行 代码 共享 。 因 此 ， 如 果 你 的 业务 逻辑 独立 于 洽 染 的 代码 ， 就 可 以 
进行 代码 复 用 。 














4.1.1 文本 组 件 


泻 染 文本 看 似 是 一 个 非常 基础 的 功能 ， 几 乎 所 有 的 应 用 都 需要 在 某 些 地 方 泻 染 文本 。 然 
而 ， 在 React Native 环境 和 移动 开发 中 的 文本 泻 染 与 Web 环境 大 相 径 庭 。 

















当 我 们 在 HIML 中 处 理 文本 时 ， 可 以 将 原始 文本 包含 在 各 种 元 素 中 ， 并 且 还 可 使 用 像 
<strong> 和 <em> 这 样 的 子 标签 为 文本 添加 样式 。 因 此 ， 你 可 以 写 出 下 面 这 样 的 HTML 代码 : 

















<p>The quick <em>brown</em> fox jumped over the lazy <strong>dog</strong>.</p> 





在 React Native 中 ， 仅 有 <Text> 组 件 可 以 将 纯 文本 作为 子 节点 。 换 言 之 ， 这 样 是 无 效 的 : 


<View> 
Text doesn't go here! 
</View> 


应 该 把 文本 用 <Text> 组 件 包装 起 来 。 
<View> 


<Text>This is OK!</Text> 
</View> 





在 React Native 中 使 用 <Text> 组 件 时 ， 我 们 再 也 不 能 使 用 <strong> 和 <em> 这样 的 子 标签 ， 
但 是 可 以 应 用 样式 中 的 fontWeight 和 fontStyle 等 属性 来 达到 相似 的 效果 。 以 下 是 使 用 内 
联 样式 达到 的 效果 : 














<Text> 


The quick <Text style={{fontStyle: "italic"}}>brown</Text> fox 
jumped over the lazy <Text style={{fontWeight: "bold"}}>dog</Text>. 


</Text> 


但 是 这 样 的 方法 很 快 会 让 代码 变 
组 件 ， 如 例 4-1 所 示 。 








得 见长 。 处 理 文本 时 ， 你 可 能 想 创 建 一 种 便于 速记 的 样式 


例 4-1 为 文本 样式 创建 可 复 用 组 件 


const styles = StyleSheet.create({ 


bold: { 
fontWeight: "bold" 
}, 
italic: { 
fontStyle: "italic" 
} 
}); 


class Strong extends Component { 


render() { 
return ( 


<Text style={styles.bold}> 
{this.props.children} 


</Text>); 
} 
} 


class Em extends Component 
render() { 
return ( 


{ 


<Text style={styles.italic}> 
{this.props.children} 


</Text>); 
} 
} 


一 且 声 明了 这 些 样式 组 件 ， 你 就 可 以 自由 地 使 用 样式 能 套 。 现 在 React Native 版 本 已 经 和 
HTML 版 本 很 相似 了 ( 见 例 4-2). 


例 4-2 使 用 样式 组 件 演 染 文本 








<Text> 
The quick <Em>brown</Em> 





fox jumped 


over the lazy <Strong>dog</Strong>. 


</Text> 


同样 ，React Native 也 没有 header 元 素 (h1, h2 等 ) 这 样 的 概念 ， 但 在 需要 的 时 候 很 容易 


定义 自己 的 <Text> 样式 。 








总 体 来 说 ， 当 你 需要 应 付 字 体检 


EF 式 问 题 时 ，React Native 强制 你 改变 原先 的 方法 。 样 式 的 








继承 是 有 限 的 ， 因 此 你 无 法 获得 泻 染 树 中 所 有 文本 市 点 的 默认 字体 设置 。 前 面 已 经 提 到 ， 
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React Native 文档 建议 通过 使 用 样式 组 件 来 解决 这 个 问题 : 


你 也 失去 了 为 整 棵 子 树 设置 默认 字体 的 能 力 。 我 们 推荐 在 应 用 中 创建 并 使 用 一 个 
统一 字体 和 尺寸 的 MyAppText 组 件 ， 以 此 来 确保 字体 样式 的 一 致 性 。 你 也 可 以 在 
此 基础 上 为 其 他 的 字体 样式 创建 更 具体 的 组 件 ， 例 如 MyAppHeaderText。 


官方 文档 的 文本 组 件 部 分 有 更 多 这 方面 的 细 市 。 
你 可 能 注意 到 了 这 里 的 一 个 模式 : React Native 坚持 自己 的 偏好 ， 提 倡 样 式 组 件 的 复 用 而 
不 是 样式 的 复 用 。 虽 然 在 开始 阶段 这 可 能 会 耗费 更 多 时 间 ， 但 是 这 种 做 法 可 以 让 隔离 更 


好 ， 以 便 在 应 用 的 任何 地 方 泻 染 组 件 都 可 以 获得 相同 的 结果 。 这 样 做 还 使 得 在 应 用 中 维护 
样式 代码 更 加 容易 。 我 们 将 在 下 一 章 更 深入 地 讨论 这 些 内 容 。 


41.2 图 片 组 件 
如 果 说 文本 是 移动 或 Web 应 用 中 最 基础 的 元 素 ， 那 么 图 片 元 素 也 不 例外 。 在 Web 环境 中 
编写 HTML 和 CSS 时 ， 我 们 可 以 通过 多 种 方式 添加 图 片 : 有 时 使 用 <img> 标签 ， 有 时 通 
rt CSS 导入 ， 如 background-image 属性 。 在 React Native 中 ， 我 们 也 有 相似 的 <Image> 组 
件 ， 但 是 它 有 些 不 太一 样 。 


<Image> 组 件 的 基础 用 法 是 很 直观 的 。 只 须 设置 prop 的 source 属性 : 

































































<Image source={require("./puppies.png")} /> 





实际 上 ， 图 片 路 径 是 以 JavaScript 模块 的 方式 被 解析 的 。 因 此 在 上 述 示 例 中 ，puppies.png 
应 该 和 组 件 放 在 同一 个 文件 夹 中 。 














图 片 的 文件 名 同样 也 有 讲究 。 如 果 你 提供 了 puppies.ios.png 和 puppies.android.png， 那 么 
每 个 平台 就 会 去 泻 染 相应 的 文件 。 类 似 地 ， 如 果 你 提供 了 @2x、@3x 后 级 的 图 片 文件 ， 
React Native 打包 器 就 会 根据 设备 屏幕 密度 选择 合适 的 图 片 。 





















































值得 一 提 的 是 ， 基 于 Web 的 图 片 资源 可 以 被 导入 ， 而 无 须 打 包 图 片 到 应 用 中 。 例 如 : 














<Image source={{uri: "https://facebook.github.io/react/img/logo_og.png"}} 
style={{width: 400, height: 400}} /> 





当 使 用 网 络 资源 时 ， 需 要 手动 指定 图 片 尺寸 。 


通过 网 络 下 载 而 不 是 作为 资源 导 和 人 的 方式 有 一 些 优 点 。 例 如 ， 在 开发 期 间 ， 采 用 这 种 方法 
可 以 更 容易 地 完成 项 目 原型 ， 而 无 须 提 前 小 心经 翼 地 导入 所 有 资源 。 同 时 ， 它 也 减 小 了 应 
用 体积 ， 用 户 无 须 下 载 你 所 有 的 资源 文件 。 然 而 ， 这 意味 着 今后 用 户 无 论 何 时 使 用 你 的 应 
用 都 要 依赖 数据 流量 。 因 此 在 多 数 情况 下 ， 你 都 应 该 避免 使 用 基于 URI 的 方式 。 


如 果 你 好 奇 如 何 使 用 用 户 自己 的 图 片 ， 我 们 会 在 第 6 章 介 绍 关于 相机 胶卷 的 内 容 。 
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由 于 React Native 强调 了 基于 组 件 的 开发 方式 ， 因 此 图 片 必 须 包 含 在 <Image> 组 件 中 ， 而 
不 允许 通过 样式 来 导入 。 例 如 在 第 3 章 中 ， 我 们 想 要 在 天 气 应 用 中 使 用 一 张 图 片 作 为 青 
景 。 不 像 HTML 和 CSS 那样 可 以 使 用 background-image 属性 来 添加 背景 ，React Native 使 
用 <Image> 作为 容器 组 件 ， 就 像 这 样 : 




















<Image source={require("./puppies.png")}> 
{/* 内 容 区 */} 
</Image> 
为 图 片 添加 样式 是 相对 容易 的 。 除 了 应 用 样式 ， 你 还 可 以 通过 特定 的 属性 控制 图 片 的 浑 
染 行为 。 例 如 ， 你 可 能 会 经 常用 到 resizeMode 属性 ， 它 可 以 被 设置 为 contain、cover 和 
stretch, RNTester 示例 程序 也 很 好 地 解释 了 这 个 属性 ( 见 图 4-1)。 
































Resize Mode 
The resizeMode style prop controls how the image 
is rendered within the frame. 


contain cover stretch 


& 4-1; contain, cover 和 stretch 的 区 别 




















<Image> 组 件 灵活 易 用 ， 你 可 以 在 自己 的 应 用 中 广泛 使 用 。 


4.2 ”人 处理 触摸 和 手势 


基于 Web 的 界面 通常 是 为 鼠标 控制 而 设计 的 。 我 们 使 用 如 hover 这 样 的 状态 来 进行 动态 
变换 ， 并 对 用 户 的 交互 行为 做 出 反馈 。 对 于 移动 应 用 而 言 ， 触 摸 则 至 关 重 要 。 移 动 平台 对 
于 你 想 要 设计 的 界面 有 一 套 自己 的 规范 ， 这 个 规范 因 平 台 而 不 同 : iOS 和 Android 不 同 ， 
Windows Phone 则 跟 它 们 又 不 一 样 。 





























React Native 提供 了 许多 API， 你 可 以 使 用 这 些 API 开发 可 触摸 的 界面 。 在 这 一 节 中 ， 我 
们 将 要 学 习 <Button> 组 件 和 <TouchableHighlight> 容器 组 件 ， 以 及 直接 访问 手势 响应 系统 
的 底层 API。 
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4.2.1 使 用 <Button> 创 建 基础 交互 


如 果 你 需要 从 一 个 基础 的 、 交 互 式 的 按钮 开始 ， 那 么 默认 的 <Button> 组 件 就 可 以 满足 你 的 
要 求 了 。 这 个 组 件 提供 了 一 组 简单 的 API， 人 允许 你 设置 按钮 颜色 、 标 签 文本 以 及 回调 函数 。 


<Button 
onPress={this._onPress} 
title="Press me" 
color="#841584" 
accessibilityLabel="Press this button" 


/> 


<Button> 按钮 是 一 个 不 错 的 入 门 组 件 ， 但 是 你 可 能 还 想 尝试 创建 属于 自己 的 交互 组 件 。 为 
此 ， 我 们 会 学 习 使 用 <TouchableHighlight>。 





4.2.2 ”使 用 <TouchableHighlight> 组 件 


任何 能 响应 用 户 触 摸 事 件 的 界面 元 素 (按钮 、 控 制 元 素 等 ) 通常 都 需要 用 
<TouchableHighlight> 包装 起 来 。 当 视图 元 素 被 触摸 时 ，<TouchabLeHighLight> 会 产生 一 
个 到 层 ， 给 予 用 户 视觉 反馈 。 这 是 其 中 一 个 关键 性 的 交互 功能 ， 它 能 让 应 用 具备 原生 体 
验 ， 不 像 那些 针对 移动 优化 的 网 站 仅 提 供 有 限 的 触摸 反馈 。 根 据 我 的 经 验 ， 无 论 哪里 需要 
一 个 类 似 Web 平台 上 的 按钮 或 者 链接 ， 你 都 可 以 使 用 <TouchableHighlight>。 





















































<TouchableHighlight> 最 基础 的 用 法 就 是 用 它 将 组 件 包 装 起 来 ， 之 后 按 下 它 时 就 会 产生 
一 个 简单 的 县 层 效果 。<TouchableHighlight> 组 件 同时 也 为 像 onPressIn、onPressOut、 
onLongPress 这 样 的 事件 提供 了 钧 子 ， 因 此 可 以 在 React 应 用 中 使 用 这 些 事件 。 






































例 4-3 展示 了 如 何 使 用 <TouchableHighlight> 包装 组 件 ， 以 便 为 用 户 提供 交互 反馈 。 








例 4-3 使 用 <TouchableHighlight> 组件 


<TouchableHighlight 
onPressIn={this._onPressIn} 
onPressOut={this._onPressOut} 
accessibilityLabel={'PUSH ME'} 
style={styles.touchable}> 
<View style={styles.button}> 
<Text style={styles.welcome}> 
{this.state.pressing ? "EEK!" : "PUSH ME"} 
</Text> 
</View> 
</TouchableHighlight> 





HARRI, SPERRE ( 见 图 4-2)。 
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图 4-2: 使 用 <TouchableHighlight> 为 用 户 提供 视觉 反馈 一 一 未 按 下 状态 ( 左 )、 按 下 状态 (6). 
带 有 高 亮 (O) 


这 是 一 个 很 勉强 的 例子 ,但 它 解释 了 一 个 基础 的 交互 ， 即 如 何 让 移动 应 用 中 的 按钮 让 人 感 
觉 是 可 触摸 的 。 倒 层 是 让 用 户 感觉 元 素 可 触摸 的 一 个 关键 的 因素 。 注 意 ， 添 加 这 样 一 个 芋 
层 无 须 为 样式 编写 任何 逻辑 ，<TouchableHighlight> 组 件 为 我 们 处 理 了 各 种 逻辑 。 














例 4-4 展示 了 这 个 按钮 组 件 的 完整 代码 。 


例 4-4 PressDemo.js 说 明了 <TouchableHighlight> 的 用 法 


import React, { Component } from "react"; 
import { StyleSheet, Text, View, TouchableHighlight } from "react-native"; 


class Button extends Component { 
constructor(props) { 
super (props); 
this.state = { pressing: false }; 


} 
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_onPressIn = () => { 
this.setState({ pressing: true }); 
}; 


_onPressOut = () => { 
this.setState({ pressing: false }); 
}; 


render() { 
return ( 
<View style={styles.container}> 
<TouchableHighlight 
onPressIn={this._onPressIn} 
onPressOut={this._onPressOut} 
style={styles.touchable} 


<View style={styles.button}> 
<Text style={styles.welcome}> 
{this.state.pressing ? "EEK!" : "PUSH ME"} 
</Text> 
</View> 


</TouchableHighlight> 
</View> 
)3 
} 
} 


const styles = StyleSheet.create({ 
container: { 
flex: 1, 
justifyContent: "center", 
alignItems: "center", 
backgroundColor: "#F5FCFF" 
}, 
welcome: { fontSize: 20, textAlign: "center", margin: 10, color: "#FFFFFF" }, 
touchable: { borderRadius: 100 }, 
button: { 
backgroundColor: "#FF0000", 
borderRadius: 100, 
height: 200, 
width: 200, 
justifyContent: "center" 
} 
); 


export default Button; 











尝试 编辑 这 个 按钮 ， 使 其 对 其 他 事件 做 出 响应 ， 例 如 onPress 3 onLongPress, 40 T fi#ix LE 
事件 与 用 户 交 互 的 对 应 关系 ， 最 佳 途径 就 是 使 用 真实 设备 进行 试验 。 











4.2.3 使 用 PanResponder 类 


不 同 于 <TouchableHighlight>, PanResponder 并 不 是 一 个 组 件 ， 而 是 React Native 的 一 个 
类 。PanResponder gestureState 对 象 为 你 提供 了 原始 位 置 的 数据 ， 以 及 当前 手势 的 累计 距 


离 、 速 度 等 信息 。 





为 了 在 React 组 件 中 使 用 PanResponder， 我 们 需要 创建 一 个 PanResponder 对 象 ， 然 后 将 它 
附加 到 组 件 的 render 方法 中 。 








创建 一 个 PanResponder 需要 我 们 为 它 指定 适合 的 处 理 函 数 〈 见 例 4-5)。 





例 4-5 创建 PanResponder， 需 要 传 入 一 些 回调 国 数 


this._panResponder = PanResponder .create({ 
onStartShouldSetPanResponder: this._handleStartShouldSetPanResponder , 
onMoveShouldSetPanResponder: this. _handleMoveShouldSetPanResponder , 
onPanResponderGrant: this. _handlePanResponderGrant, 
onPanResponderMove: this. _handlePanResponderMove, 
onPanResponderRelease: this._handlePanResponderEnd, 
onPanResponderTerminate: this. _handlePanResponderEnd, 


p; 





我 们 可 以 使 用 这 6 个 函数 来 访问 触摸 事件 的 完整 生命 周期 。onStartShouLdsetPanResponder 和 
onMoveShouldSetPanResponder 决定 了 我 们 是 否 应 该 对 给 定 的 触摸 事件 做 出 响应 ,onPanResponder- 
Grant 会 在 触摸 事件 开始 时 被 调用 ，onPanResponderReLease 和 onPanResponderTerminate 会 
在 触摸 事件 结束 时 被 调用 。 在 触摸 事件 进行 期 间 ， 我 们 可 以 使 用 onPanResponderMove 获取 
相关 数据 。 
































然后 ， 使 用 展开 语法 (spread syntax) 将 PanResponder 添加 到 render 方法 内 的 组 件 视图 上 
( 见 例 4-6)。 





例 4-6 使 用 展开 语法 添加 PanResponder 


render: function() { 
return ( 
<View 
{...this._panResponder .panHandlers}> 
{ /* 这 里 是 视图 内 容 */ } 
</View> 
); 
} 






































之 后 ， 如 果 你 的 触摸 起 始 于 视图 内 ， 那 么 传人 到 Panesponder.create 的 处 理 函 数 将 会 在 
相应 的 移动 事件 发 生 时 被 调用 。 


























图 4-3 泻 染 了 一 个 圆 形 ， 你 可 以 在 屏幕 上 拖 搜 它 。 它 的 坐标 会 在 你 移动 时 进行 更 新 。 
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1 touches, dx: 280, dy: 223, vx: 0.11848977240803385, vy: 
(0.0296224431 02008462 




















4-3; PanResponder 演示 


为 了 实现 这 一 点 ， 我 们 现在 要 具体 实现 PanResponder 回调 函数 。 前 两 个 方法 很 简单 ， 通 过 
实现 _handleStartShouldSetPanResponder 和 _handLeMoveShouLdSetPanResponder， 我 们 可 








以 声明 : 希望 响应 接收 到 的 触摸 事件 ( 见 例 4-7)。 





例 4-7 前 两 个 回调 只 需要 简单 地 返回 true 
_handleStartShouldSetPanResponder = (event, gestureState) => { 
// 当 用 户 按 下 圆 形 时 ， 需 要 被 激活 吗 ? 
return true; 


}; 























_handleMoveShouldSetPanResponder = (event, gestureState) => { 
// 当 用 户 触摸 并 移动 圆 形 时 ， 需 要 被 激活 吗 ? 
return true; 


}; 


然后 ， 我 们 可 以 使 用 _handlePanResponderMove 中 的 位 置 数 据 ， 来 更 新 
例 4-8)。 









































圆 形 视图 的 4 





ill 4-8 7E _handlePanResponderMove 中 更 新 圆 形 的 位 置 


_handlePanResponderMove = (event, gestureState) => { 

// 使 用 增 量 来 计算 当前 位 置 

this._circleStyles.style.left = this. previousLeft + gestureState.dx; 
this._circleStyles.style.top = this._previousTop + gestureState.dy; 
this._updatePosition(); 


}; 





_updatePosition = () => { 
this.circle && this.circle.setNativeProps(this._circleStyles); 


J; 
请 注意 ， 这 里 我 们 调用 了 setNativeProps 来 更 新 圆 形 视图 的 位 置 。 

















E 使 用 动画 了 时， 你 可 以 使 用 setNativeProps 来 直接 修改 组 件 ， 而 不 需要 传 
先 地 设置 state 和 props。 这 可 以 使 你 避免 重新 泻 染 组件 层 次 结构 带 来 的 开 


JL 


4H, (He SE EAE 


img 





NY 








形 在 触摸 





接 下 来 ， 我 们 实现 _handlePanResponderGrant 和 _handLePanResponderEnd， 让 圆 
的 时 候 可 以 改变 颜色 ( 见 例 4-9)。 


例 4-9 实现 高 亮 行为 
_highlight = () => { 
this.circle && 
this.circle.setNativeProps({ 
style: { backgroundColor: "blue" } 

}); 

}; 

_unHighlight = () => { 


this.circle && 
this.circle.setNativeProps({ style: { backgroundColor: "green" } }); 


J}; 

_handlePanResponderGrant = (event, gestureState) => { 
this._highlight(); 

}; 


_handlePanResponderEnd = (event, gestureState) => { 
this._unHighlight(); 
}; 


我 们 把 以 上 内 容 结 合 起 来 ， 使 用 PanResponder 构建 一 个 交互 式 视图 ， 如 例 4-10 所 示 。 


例 4-10 PanDemo.js 说 明了 PanResponder 的 用 法 


// 改编 自 
// https://github.com/facebook/react-native/blob/master/ 


// RNTester/js/PanResponderExample. js 
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"use strict"; 


import React, { Component } from "react"; 
import { StyleSheet, PanResponder, View, Text } from "react-native"; 


const CIRCLE_SIZE = 40; 
const CIRCLE_COLOR = "blue"; 
const CIRCLE_HIGHLIGHT_COLOR = "green"; 


class PanResponderExample extends Component { 
// 设置 一 些 初始 值 
_panResponder = {}; 
_previousLeft = 0; 
_previousTop = 0; 
_circleStyles = {}; 
circle = null; 


constructor(props) { 
super(props); 
this.state = { 
numberActiveTouches: 0, 


moveX: 0, 
moveY: 0, 
x0: 0, 
y0: 0, 
dx: 0, 
dy: 0, 
vx: 0, 
vy: 0 
}; 
} 


componentWillMount() { 
this._panResponder = PanResponder.create({ 


onStartShouldSetPanResponder: this. handleStartShouldSetPanResponder, 
onMoveShouldSetPanResponder: this._handleMoveShouldSetPanResponder, 


onPanResponderGrant: this._handlePanResponderGrant, 
onPanResponderMove: this._handlePanResponderMove, 
onPanResponderRelease: this._handlePanResponderEnd, 
onPanResponderTerminate: this._handlePanResponder End 

}) 

this._previousLeft = 20; 

this._previousTop = 84; 

this._circleStyles = { 
style: { left: this._previousLeft, top: this. _previousTop } 

}; 

} 


componentDidMount() { 
this._updatePosition(); 


} 


render() { 
return ( 
<View style={styles.container}> 





46 


第 4 章 


<View 

ref={circle => { 
this.circle = circle; 

}} 
style={styles.circle} 
{...this._panResponder.panHandlers} 

/> 

<Text> 
{this.state.numberActiveTouches} touches, 
dx: {this.state.dx}, 
dy: {this.state.dy}, 
vx: {this.state.vx}, 
vy: {this.state.vy} 

</Text> 

</View> 
)3 
} 


// _highlight 和 _unHighlight 提 供给 PanResponder 的 其 他 方法 进行 调用 ， 
// 为 用 户 提供 视觉 反馈 
_highlight = () => { 

this.circle && 

this.circle.setNativeProps({ 
style: { backgroundColor: CIRCLE_HIGHLIGHT_COLOR } 

}); 

}; 



































_unHighlight = () => { 
this.circle && 
this.circle.setNativeProps({ style: { backgroundColor: CIRCLE_COLOR } }); 


}; 
// 使 用 setNativeProps 直 接 控制 当前 位 置 


_updatePosition = () => { 
this.circle && this.circle.setNativeProps(this._circleStyles) ; 


F; 








_handleStartShouldSetPanResponder = (event, gestureState) => { 
// 当 用 户 按 下 圆 形 时 ， 需 要 被 激活 吗 ? 
return true; 


Js 








_handleMoveShouldSetPanResponder = (event, gestureState) => { 
// 当 用 户 触摸 并 移动 圆 形 时 ， 需 要 被 激活 吗 ? 
return true; 


}5 











_handlePanResponderGrant = (event, gestureState) => { 
this._highlight(); 
33 


_handlePanResponderMove = (event, gestureState) => { 
this.setState({ 
stateID: gestureState.stateID, 
moveX: gestureState.movex, 
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moveY: gestureState.movey, 
x0: gestureState.x0, 
yO: gestureState.y0, 
dx: gestureState.dx, 
dy: gestureState.dy, 
vx: gestureState.vx, 
vy: gestureState.vy, 


numberActiveTouches: gestureState.numberActiveTouches 


})s 
// 使 用 增 量 计算 当前 位 置 





this._circleStyles.style.left = this._previousLeft + gestureState.dx; 
this._circleStyles.style.top = this._previousTop + gestureState.dy; 


this._updatePosition(); 


ig 


_handlePanResponderEnd = (event, gestureState) => { 


this._unHighlight(); 
this._previousLeft += gestureState.dx; 
this._previousTop += gestureState.dy; 
}; 
} 


const styles = StyleSheet.create({ 
circle: { 
width: CIRCLE_SIZE, 
height: CIRCLE_SIZE, 
borderRadius: CIRCLE_SIZE / 2, 
backgroundColor: CIRCLE_COLOR, 
position: "absolute", 
left: 0, 
top: 0 
}， 
container: { flex: 1, paddingTop: 64 } 
p; 


export default PanResponderExample; 








如 果 你 计划 实现 自己 的 手势 识别 ， 我 建议 你 在 设备 上 使 用 这 款 应 用 ， 这 样 你 就 可 以 感受 到 
这 些 值 是 如 何 响应 的 。 前 面 的 图 4-3 展示 了 一 张 截图 ， 但 是 你 还 可 以 使 用 真实 的 触摸 屏幕 


























进行 体验 。 
选择 处 理 触摸 的 方法 








当 使 用 上 一 节 讨 论 的 触摸 和 手势 API 时 ， 你 应 该 如 何 选 择 呢 ? 这 取决 于 你 想 开发 什么 样 的 


应 用 。 





为 了 给 用 户 提供 基础 的 反馈 ， 指 明 一 个 按钮 或 ; 


<TouchableHighlight> 组 件 。 


H 


他 元 素 是 可 触摸 的 ， 你 可 以 使 用 

















为 了 实现 自己 定制 的 触摸 界面 ， 你 可 以 使 用 PanResponder。 如 果 要 设计 一 款 游戏 ， 或 者 一 款 
有 着 与 众 不 同 的 界面 的 应 用 ， 那 就 应 该 花 一 些 时 间 使 用 这 些 API 开发 你 想 要 的 交互 方式 。 








对 于 许多 应 用 来 说 ， 根 本 不 需要 定制 任何 触摸 处 理 函 数 。 在 下 一 市 中 ， 我 们 将 接触 一 些 更 
高 级 的 组 件 ， 这 些 组 件 实现 了 通用 的 UI 模式 。 


4.3 使 用 列表 


许多 移动 端的 用 户 界面 都 以 列表 作为 核心 元 素 。 在 图 4-4 中 ， 你 可 以 看 到 Dropbox, 
Twitter FH iOS 这 3 款 应 用 设置 的 交互 模式 。 其 核心 之 处 在 于 列表 作为 滚动 容器 ， 其 中 包含 
一 些 子 视 图 。 这 种 看 似 简单 的 设计 模式 ， 其 实 是 许多 移动 端 界 面 的 组 成 部 分 。 
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4-4, Dropbox, Twitter 和 iOS 应 用 设置 中 使 用 的 列表 





React Native 提供 了 两 个 带 有 简易 API 的 列表 组 件 。<FLatList> 组 件 适 用 于 相似 结构 数据 
组 成 的 长 列表 ， 它 包含 了 几 处 性 能 上 的 优化 。<SectionList> 组 件 适用 于 分 割 成 不 同 逻 辑 
部 分 的 数据 ， 通 常 包含 章节 标题 ， 类 似 iOS 中 的 UITableview。 总 体 来 说 ，<FlatList> 和 
<SectionList> 涵盖 了 大 部 分 常见 的 使 用 场景 ， 但 是 如 果 你 需要 了 解 其 中 的 原理 ， 并 添加 
一 些 自 定义 的 列表 处 理 逻 辑 ， 可 以 参考 <VirtualizedList>, 











优化 列表 的 泻 染 性 能 是 一 个 众所周知 的 棘手 问题 ， 因 为 在 不 同 的 案例 中 需要 
不 同 的 方法 。 用 户 是 在 联系 人 列表 中 快速 寻找 特定 的 人 ， 还 是 在 慢 慢 浏览 医 
K? 列表 项 是 同 质 化 的 ， 还 是 每 个 子 视图 都 不 一 样 ? 如 果 你 遇 到 了 性 能 问 
题 ， 请 先 注 意 你 的 列表 。 




















本 节 中 ， 我 们 将 构建 一 款 应 用 ， 用 来 显示 纽约 时 报 的 畅销 书 列表 ， 并 让 我 们 查看 每 本 
数据 ， 如 图 4-5 所 示 。 我 们 会 分 别 使 用 <FlatList> 和 <SectionList> 构建 两 个 版 本 。 


a 
还 
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“al A 10:26 


Michael Connelly 
THE LATE SHOW 


John Grisham 
CAMINO ISLAND 


Daniel Silva 
HOUSE OF SPIES 




















图 4-5: 我 们 将 要 开发 的 图 书 列表 应 用 


如 果 你 愿意 的 话 ， 可 以 从 《纽约 时 报 》 网 站 获取 属于 你 自己 的 API 令 牌 ， 也 可 以 使 用 本 
示例 代码 中 的 API。 





a 


4.3.1 使 用 基础 的 <FlatList> 组 件 


我 们 从 基础 的 <FlatList> 组 件 开始 ， 它 需要 两 个 属性 : data 和 renderItem, 





<FlatList 
data={this.state.data} 
renderItem={this._renderItem} /> 


data 属性 ， 顾 名 思 义 ， 就 是 <FLatList> 将 要 呈现 的 数据 。data 应 该 是 数组 类 型 的 ， 其 中 
每 个 元 素 都 有 一 个 独立 的 key 属性 ， 再 加 上 其 他 任何 你 所 需要 的 数据 属性 。 


renderItem 是 一 个 函数 ， 基 于 data 数组 中 的 任何 元 素 中 的 数据 ， 返 回 对 应 的 组 件 。 




















<FlatList> 的 基本 用 法 如 例 4-11 所 示 。 





RE 
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例 4-11  src/bestsellers/SimpleList.js 


import React, { Component } from "react"; 


import { StyleSheet, Text, View, FlatList } from "react-native"; 


class SimpleList extends Component { 


constructor(props) { 
super (props); 
this.state = { 


data: [ 
{ key: "a" }, 
{ key: "b" }, 
{ key: "c" }, 
{ key: "d" }, 
{ key: "a longer example" }, 
{ key: "e" }, 
{ key: "f" }, 
{ key: "g" }, 
{ key: "h" }, 
{ key: "i" }, 
{ key: "j" }, 
{ key: "k" }, 
{ key: "1" }, 
{ key: "m" }, 
{ key: "n" }, 
{ key: "o" }, 
{ key: "p" } 
] 
J; 


} 


_renderItem = data => { 


return <Text style={styles.row}>{data.item.key}</Text>; 


7; 


render() { 
return ( 


<View style={styles.container}> 
<FlatList data={this.state.data} renderItem={this._renderItem} /> 


</View> 
)3 
} 
} 


const styles = StyleSheet.create({ 


container: { 
flex: 1, 
justifyContent: "center", 
alignItems: "center", 
backgroundColor: "#F5SFCFF" 
}, 


row: { fontSize: 24, padding: 


}); 


export default SimpleList; 


42, borderWidth: 1, borderColor: "#DDDDDD" } 
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使 用 <FlatList> 时 经 常会 遇 到 的 一 个 陷阱 是 ， 传 入 renderiten 方法 的 对 象 ， 需 要 通过 
iten 属性 来 访问 实际 的 数据 : 


_renderItem = data => { 
return <Text style={styles.row}>{data.item.key}</Text>; 


}; 
我 们 可 以 使 用 解构 的 表达 来 简化 这 段 代码 : 
_renderItem = ({item}) => { 


return <Text style={styles.row}>{item.key}</Text>; 
}; 








运行 结果 如 图 4-6 所 示 。 





Carrier > 8:30 PM = 


a longer example 











4-6; SimpleList 组 件 泻 染 了 一 个 <FlatList> 的 骨架 


4.3.2 ”更 新 <FlatList> 的 内 容 
如 果 继 续 开 发 ， 要 做 些 什么 呢 ” 我 们 来 创建 一 个 带 有 更 复杂 数据 的 <ListView 组 件 。 我 们 
使 用 《纽约 时 报 》 网 站 的 API 来 开发 一 个 展示 其 畅销 图 书 列表 的 简单 应 用 。 
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首先 ， 使 用 模拟 数据 表示 来 自 《 纽 约 时 报 》API 的 示例 响应 ， 如 例 4-12 所 示 。 
例 4-12 基于 API 预期 响应 生成 的 模拟 数据 


const mockBooks = [ 
{ 
rank: 1, 
title: "GATHERING PREY", 
author: "John Sandford", 
book_image: 
"http: //du.ec2.nytimes.com.s3.amazonaws.com/prd/books/9780399168796. jpg" 
}, 
{ 


rank: 2, 
title: "MEMORY MAN", 
author: "David Baldacci", 
book_image: 
"http: //du.ec2.nytimes.com.s3.amazonaws.com/prd/books/9781455586387. jpg" 
} 
1; 


然后 我 们 添加 一 个 可 以 泻 染 这 种 数据 的 组 件 。 如 例 4-13 所 示 ， 这 个 <BookI tem> 组 件 组 合 
运用 了 <View>、<Text> 和 <Image> 组 件 来 显示 每 本 书 的 基础 信息 。 








例 4-13 src/bestsellers/BookItem.js 


import React, { Component } from "react"; 
import { StyleSheet, Text, View, Image, ListView } from "react-native"; 


const styles = StyleSheet.create({ 
bookItem: { 
flexDirection: "row", 
backgroundColor: "#FFFFFF", 
borderBottomColor: "#AAAAAA", 
borderBottomWidth: 2, 
padding: 5, 
height: 175 
}, 
cover: { flex: 1, height: 150, resizeMode: "contain" }, 
info: { 
flex: 3, 
alignItems: "flex-end", 
flexDirection: "column", 
alignSelf: "center", 
padding: 20 
}, 
author: { fontSize: 18 }, 
title: { fontSize: 18, fontWeight: "bold" } 


p); 


class BookItem extends Component { 
render() { 
return ( 
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<View style={styles.bookItem}> 
<Image style={styles.cover} source= /> 
<View style={styles.info}> 
<Text style={styles.author}>{this.props.author}</Text> 
<Text style={styles.title}>{this.props.title}</Text> 
</View> 
</View> 
)3 
} 
} 


export default BookItem; 


要 使 用 这 个 <BookItem> 组 件 ， 我 们 需要 修改 _renderItem 国 数 。<BookItem> 期 望 接收 3 个 
参数 ，coverURL、tttte、author (封面 图 片 地 址 、 标 题 、 作 者 )。 





_renderItem = ({ item }) => { 
return ( 
<BookItem 
coverURL={item.book_image} 
title={item.key} 
author={item. author} 
/> 
); 
J 


要 记 住 ， 在 <FlatList> H, data 数组 中 的 每 个 元 素 都 必须 定义 一 个 唯一 的 key 属性 。 因 此 ， 


我 们 要 补充 一 个 辅助 方法 ， 接 收 一 个 对 象 数组 作为 参数 ， 并 为 其 添加 key 属性 ， 如 例 4-14 
所 示 。 





























例 4-14 _addKeysToBooks 方法 为 books 数组 中 的 每 一 个 对 象 添 加 key 属性 


_addKeysToBooks = books => { 
return books.map(book => { 
return Object.assign(book, { key: book.title }); 


J; 


现在 ， 有 了 这 个 辅助 方法 ， 我 们 就 可 以 使 用 例 4-12 中 的 模拟 数据 ， 来 更 新 初始 状态 : 





constructor(props) { 

super (props); 

this.state = { data: this._addKeysToBooks(mockBooks) }; 
} 


将 以 上 内 容 结合 起 来 ， 这 个 模拟 的 畅销 书 应 用 代码 应 该 如 例 4-15 所 示 ， 应 用 的 显示 效果 如 
4-7 所 示 。 





例 4-15  src/bestsellers/MockBookList.js 


import React, { Component } from "react"; 
import { StyleSheet, Text, View, Image, FlatList } from "react-native"; 
import BookItem from "./BookItem"; 


const mockBooks = [ 
{ 
rank: 1, 
title: "GATHERING PREY", 
author: "John Sandford", 
book_image: 


"http: //du.ec2.nytimes.com.s3.amazonaws.com/prd/books/9780399168796. jpg" 


’ 


{ 
rank: 2, 
title: "MEMORY MAN", 
author: "David Baldacci", 
book_image: 


"http: //du.ec2.nytimes.com.s3.amazonaws.com/prd/books/9781455586387. jpg" 


} 
J; 


class BookList extends Component { 
constructor (props) { 
邮 super (props); 
this.state = { data: this._addKeysToBooks(mockBooks) }; 


电 } 


_renderItem = ({ item }) => { 
return ( 
<BookItem 
coverURL={item. book_image} 
title={item.key} 
author={item. author} 
/> 
); 
F 


_addKeysToBooks = books => { 
// 给 《纽约 时 报 》 网 站 获取 到 的 API 响 应 中 的 每 个 对 象 添 加 key 属 性 
return books.map(book => { 
return Object.assign(book, { key: book.title }); 
p; 
J: 





+ 
a 





render() { 


HF 


return <FlatList data={this.state.data} renderItem={this._renderItem} />; 


} 
} 


const styles = StyleSheet.create({ container: { flex: 1, paddingTop: 22 } }); 


export default BookList; 
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4.3.3 整合 真实 数据 
硬 编 码 的 数据 我 们 已 经 处 理 好 了 ， 是 时 候 测 试 真实 的 场景 了 。 例 4-16 中 提供 了 访问 《纽约 
时 报 》API 的 实际 代码 。 





例 4-16 src/bestsellers/NYT.js 


const API_KEY = "73b19491b83909c7e07016f4bb4644f9:2:60667290" ; 
const LIST_NAME = "hardcover-fiction"; 
const API_STEM = "https://api.nytimes.com/svc/books/v3/lists"; 


function fetchBooks(list_name = LIST_NAME) { 
let url = “S{API_STEM}/${LIST_NAME}?response-format=json&api-key=${API_KEY}°; 
return fetch(url) 
.then(response => response. json()) 
.then(responseJson => { 
return responseJson.results.books; 
}) 
.catch(error => { 
console.error(error); 
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} 


export default { fetchBooks: fetchBooks }; 


我 们 将 这 个 库 导 入 到 组 件 中 。 





import NYT from "./NYT"; 














现在 来 添加 一 个 _refreshData 方法 ， 其 中 会 调用 《纽约 时 报 》API: 





_refreshData = () => { 
NYT.fetchBooks().then(books => { 
this.setState({ data: this._addKeysToBooks(books) }); 
}); 
}; 


最 后 我 们 需要 将 初始 状态 设置 为 空 数组 ， 然 后 在 componentDidMount 中 调用 _refreshData。 
这 样 ， 我 们 的 应 用 就 可 以 从 《纽约 时 报 》 畅 销 书 列表 中 泻 染 实时 的 数据 ! 完整 的 代码 如 
例 4-17 Pras, El 4-8 展示 了 更 新 后 的 应 用 。 








例 4-17 src/bestsellers/BookList.js 


import React, { Component } from "react"; 
import { StyleSheet, Text, View, Image, FlatList } from "react-native"; 


import BookItem from "./BookItem"; 
import NYT from "./NYT"; 


class BookList extends Component { 
constructor(props) { 
super (props); 
this.state = { data: [] }; 
} 


componentDidMount() { 
this._refreshData(); 


} 


_renderItem = ({ item }) => { 
return ( 
<BookItem 
coverURL={item.book_image} 
title={item.key} 
author={item. author} 
/> 
)3 
}; 


_addKeysToBooks = books => { 
// 给 《纽约 时 报 》 网 站 获取 到 的 API 响 应 中 的 每 个 对 象 添 加 key 属 性 ， 
return books.map(book => { 
return Object.assign(book, { key: book.title }); 





+ 
a 





HF 
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})s 
J; 


_refreshData = () => { 
NYT.fetchBooks().then(books => { 
this.setState({ data: this._addKeysToBooks(books) }); 
}) 
J; 


render() { 
return ( 
<View style={styles.container}> 
<FlatList data={this.state.data} renderItem={this._renderItem} /> 
</View> 
); 
} 
} 


const styles = StyleSheet.create({ container: { flex: 1, paddingTop: 22 } }); 


export default BookList; 
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4-8: 使 用 <FLatList> 查看 当前 畅销 书 





如 你 所 见 ， 只 要 你 记得 合理 构造 数据 ，<FlatList> 组 件 的 使 用 方法 就 很 简单 。 除 了 处 到 





Sy 








动 和 触摸 交互 ，<FtLatList> 还 包含 了 许多 性 能 优化 ， 用 来 加 速 泻 染 和 减少 内 存 使 用 。 


4.3.4 ”使 用 <SectionList> 
<SectionList> 组 件 是 为 数据 集 而 设计 的 ， 在 这 些 数据 集中 ， 


大 部 分 是 同类 型 的 项 目 ， 加 





上 可 选 的 章节 标题 。 例 如 ， 如 果 我 们 想 泻 染 几 种 不 同类 型 的 畅销 书 列表 ， 其 中 只 有 标题 上 





的 区 别 ， 那 么 <SectionList> 就 是 一 个 很 好 的 选择 。 


<SectionList> 接收 的 参数 包括 sections, renderItem 和 renderSectionHeader。 我 们 从 
sections 开始 介绍 ， 它 应 该 是 一 个 数组 ， 甚 中 的 每 个 对 象 都 包含 了 章节 数据 。 每 一 个 章节 
对 象 都 必须 包含 标题 和 数据 键 。 数 据 格式 必须 和 <FLatList> 中 的 数据 类 似 ， 应 该 是 一 个 数 











组 ， 其 中 的 每 个 元 素 都 具有 唯一 的 key 属性 。 


我 们 来 更 新 -renderData Fik, SRI MEA AE ie PR A 
状态 。 





_refreshData = () => { 
Promise 
.all([ 
NYT. fetchBooks("hardcover-fiction"), 
NYT. fetchBooks("hardcover -nonfiction" ) 
]) 
.then(results => { 
if (results.length !== 2) { 
console.error("Unexpected results"); 


} 


this.setState({ 
sections: [ 


{ 


title: "Hardcover Fiction", 

data: this._addKeysToBooks(results[0]) 
}; 
{ 


title: "Hardcover NonFiction", 
data: this._addKeysToBooks(results[1]) 


Fs 





区 的 列表 ， 并 相应 地 更 新 组 件 





我 们 不 需要 更 新 _renderIten 方法 ， 只 需要 添加 一 个 新 的 _renderHeader 方法 即 可 。 


_renderHeader = ({ section }) => { 
return ( 
<Text style={styles.headingText}> 
{section. title} 
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</Text> 
); 
}; 


最 后 要 更 新 render 方法 ， 返 回 <SectionList>， 赫 代 原 本 的 <FlatList>。 





<SectionList 
sections={this.state.sections} 
renderItem={this._renderItem} 
renderSectionHeader={this._renderHeader } 


/> 





将 以 上 内 容 结合 起 来 ， 我 们 使 用 <SectionList> 的 代码 应 该 如 例 4-18 所 示 ， 更 新 后 应 月 
显示 效果 如 图 4-9 所 示 。 








例 4-18 src/bestsellers/BookSectionList.js 


import React, { Component } from "react"; 
import { StyleSheet, Text, View, Image, SectionList } from "react-native"; 


import BookItem from "./BookItem"; 
import NYT from "./NYT"; 


class BookList extends Component { 
constructor(props) { 
super (props); 
this.state = { sections: [] }; 


} 


componentDidMount() { 
this._refreshData(); 


} 


_addKeysToBooks = books => { 
// 给 《纽约 时 报 》 网 站 获取 到 的 API 响 应 中 的 每 个 对 象 添加 key 属 性 ， 用 于 
return books.map(book => { 
return Object.assign(book, { key: book.title }); 
}) 
}; 














i 

















my 
Sg 


_refreshData = () => { 
Promise 
.all([ 
NYT. fetchBooks("hardcover-fiction"), 
NYT. fetchBooks("hardcover -nonfiction") 


]) 
.then(results => { 
if (results.length !== 2) { 
console.error("Unexpected results"); 
} 


this.setState({ 
sections: [ 


HAY 





{ 


title: "Hardcover Fiction", 

data: this._addKeysToBooks(results[0]) 
}, 
{ 


title: "Hardcover NonFiction", 
data: this. _addKeysToBooks(results[1]) 


}5 


_renderItem = ({ item }) => { 
return ( 
<BookItem 
coverURL={item. book_image} 
title={item.key} 
author={item. author} 
/> 
); 
F3 


_renderHeader = ({ section }) => { 
return ( 
<Text style={styles.headingText}> 
{section.title} 


</Text> 
)3 
}; 
render() { 
return ( 
<View style={styles.container}> 
<SectionList 
sections={this.state.sections} 
renderItem={this._renderItem} 
renderSectionHeader={this._renderHeader} 
/> 
</View> 
)3 
} 


} 


const styles = StyleSheet.create({ 
container: { flex: 1, paddingTop: 22 }, 
headingText: { 
fontSize: 24, 
alignSelf: "center", 
backgroundColor: "#FFF", 
fontWeight: "bold", 
paddingLeft: 20, 
paddingRight: 20, 
paddingTop: 2, 
paddingBottom: 2 
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} 
p; 


export default BookList; 
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4-9; 使 用 <SectionList> 查看 当前 畅销 书 


4.4 导航 


移动 应 用 中 的 导航 ， 大 体 上 是 指 允 许 用 户 从 一 个 屏幕 过 渡 到 另 一 个 屏幕 的 代码 。 在 Web 
中 ， 导 航 是 window.historyAPI 的 一 部 分 ， 它 提供 了 诸如 “后 退 ” 和 “前 进 ” 之 类 的 概念 。 











在 React Native 中 ， 常 用 的 导航 组 件 包 括 内 置 的 <Navigator> 和 <NavigatorI0S> 组 件 ， 以 
及 开源 社区 的 一 些 解 决 方案 ， 例 如 <StackNavigator> (由 react-navigation 库 提供 ) 。 





为 了 在 移动 应 用 的 屏幕 之 间 移 动 ， 导 航 逻 辑 是 必需 的 。 它 还 可 以 实现 “深层 链接 ”(deep 
linking)， 让 用 户 可 以 通过 URL 跳 转 到 你 应 用 中 的 特定 屏幕 上 。 


第 10 章 会 继续 深入 介绍 导航 。 
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4.5 其 他 结构 化 组 件 


React Native 中 还 有 许多 其 他 的 结构 化 组 件 。 例 如 ， 实 用 的 <TabBarI0S> 和 <Segmented 
ControlI0S> 组 件 ( 见 图 4-10)， 以 及 <DrawerLayoutAndroid> 和 <ToolbarAndroid> 组 件 等 


( 见 图 4-11). 
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& 4-10: iOS 的 segmented 控制 (上 ) 和 tab 组 件 (下 ) 
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@ 4-11; Android §4 toolbar (Æ) 和 drawer 组 件 (4) 


你 会 发 现 这 些 组 件 都 是 以 特定 平台 的 名 称 为 后 缀 命名 的 。 这 是 因为 它们 为 特定 平台 的 UI 
元 素 封 装 了 原生 API。 
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这 些 组 件 对 于 组 织 应 用 的 多 个 界面 来 说 是 非常 实用 的 。 例 如 ，<TabBarI0S> 和 
<DrawerLayoutAndroid> 组 件 为 你 在 模式 和 方法 之 间 的 切换 提供 了 一 种 简便 的 方法 。 
<SegmentedControlI0S> 和 <ToolbarAndroid> 适合 用 来 做 细 粒 度 的 控制 。 











推荐 你 参考 特定 平台 的 设计 规范 来 更 好 地 使 用 这 些 组 件 : 


。 Android 设计 指南 (https://developer.android.com/guide/topics/resources/drawable-resource# 
Bitmap) 

。 iOS 人 机 界面 指南 (https://developer.apple.com/design/human-interface-guidelines/ios/overview/ 
themes/) 














第 7 章 会 进一步 介绍 平台 特定 的 组 件 。 
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在 本 章 中 ， 我 们 具体 而 深入 地 学 习 了 React Native 中 最 重要 的 一 些 组 件 。 我 们 讨论 了 如 
何 使 用 基础 的 底层 组 件 ， 例 如 <Text> 和 <Image>， 以 及 像 <FlatList>、<SectionList> 和 
<TabBarI0S> 这 样 更 抽象 的 组 件 。 同 时 ， 我 们 也 学 习 了 如 何 使 用 不 同 的 触摸 API 和 组 件 
开发 定制 的 触摸 处 理 函 数 。 














现在 ， 你 应 该 能 使 用 React Native 开发 一 些 有 基础 功能 的 应 用 了 ! 既然 你 已 经 了 解 了 本 章 
中 讨论 的 组 件 ， 你 会 发 现 基 于 这 些 组 件 或 结合 这 些 组 件 来 开发 自己 的 应 用 与 使 用 Web 环境 
的 React 是 非常 相似 的 。 








当然 ， 能 开发 出 具有 基础 功能 的 应 用 仅仅 是 我 们 的 征程 的 一 部 分 。 在 下 一 章 中 ， 我 们 将 重 
点 了 解 样式 相关 的 内 容 ， 以 及 如 何 使 用 React Native 的 样式 来 达到 移动 端 上 想 要 的 感 观 体 
验 效果 。 
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样式 


能 实现 具体 功能 的 应 用 固然 是 很 不 错 的 ， 但 如 果 你 不 懂得 如 何 为 它 添加 样式 ， 那 么 可 能 不 





会 有 很 大 的 进展 。 在 第 3 章 中 ， 我 们 使 用 基 





而 样式 构建 了 一 个 天 气 应 用 。 虽 然 它 让 我 们 


对 React Native 组 件 的 样式 有 了 一 些 大 概 的 了 解 ， 但 其 中 忽略 了 很 多 细 市 。 本 章 中 我 们 会 


更 深入 地 学 习 React Native 样式 的 用 法 ， 包 括 如 何 创建 和 管理 





样式 表 。 当 然 ， 还 有 React 


Native 实现 CSS 规则 的 细节 。 在 学 习 之 后 ， 你 应 该 可 以 轻松 自如 地 为 React Native 组 件 或 


应 用 添加 样式 了 。 





如 果 想 在 React Native 和 Web 应 用 之 间 共 享 样式 ，GitHub 上 的 React Style 
com/js-next/react-style) 提供 了 一 种 在 Web 上 使 用 React Native f 


5.1 声明 和 操作 样式 


常 使 用 分 离 的 样式 表 文 件 ， 





当 使 用 Web 环境 的 React 时 ， 我 们 通 














项 目 (https://github. 
FE 式 的 解决 方案 。 


它们 可 能 使 用 CSS, 


SASS 或 LESS 编写 。 但 React Native 采用 了 一 种 完全 不 同 的 方式 ， 它 将 样式 完全 带 入 了 
JavaScript 的 世界 ， 强 制 你 显 式 地 链接 样式 和 组 件 。 这 种 方式 引起 了 巨大 的 反响 ， 因 为 它 








彻底 按 弃 了 基于 CSS 的 样式 规范 。 
为 了 理解 React Native 样式 的 设计 思想 ， 


首先 需要 考虑 一 些 传统 CSS H 




















FE 式 表 的 痛 点 。 


"传统 


CSS 存在 许多 问题 ， 所 有 的 CSS 规则 和 类 名 都 在 全 局 作用 域 里 ， 如 果 不 广 意 ， 一 个 组 件 样 
式 就 很 容易 会 影响 到 其 他 组 件 。 例 如 ， 引 入 Twitter 公司 很 流行 的 Bootstrap 类 库 的 同时 也 














vjeux/react-css-in-js) 。 








注 1: Christopher Chedeau (BH Vjeux) 的 幻灯 片 CSS in JS 提供 了 一 个 很 好 的 概览 (https://speakerdeck.com/ 
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会 引进 600 多 个 新 的 全 局 变量 。CSS 并 非 显 式 地 链接 HTML 元 素 ， 因 此 想 消除 无 用 的 代码 
会 变 得 很 困难 ， 并 且 不 容易 确定 哪 种 样式 会 被 应 用 到 指定 元 素 上 。 








像 SASS 和 LESS 这 样 的 语言 尝试 替代 CSS 不 尽 如 人 意 的 部 分 ， 但 许多 类 似 的 基本 问题 仍 
然 存 在 。 使 用 React 让 我 们 有 机 会 保留 CSS 可 取 的 部 分 ， 也 可 以 避免 一 些 有 歧义 的 部 分 。 
React Native 实现 了 CSS 可 用 样式 的 一 个 子 集 ， 在 不 损失 高 度 表达 能 力 的 前 提 下 能 够 保持 
样式 API 的 简洁 性 。 然 而 ，position 属性 是 完全 不 同 的 ， 我 们 在 本 章 后 面 会 学 习 到 。 并 
且 ，React Native 不 支持 伪 类 、 动 画 或 选择 器 。 文 档 中 可 以 查看 支持 的 属性 列表 。 








React Native 采用 基于 JavaScript 的 样式 对 象 来 代替 传统 样式 表 。 它 强制 JavaScript 代码 和 
组 件 保持 模块 化 ， 这 也 是 React Native 的 巨大 优势 之 一 。 通 过 把 样式 引入 到 JavaScript 领 
域 ，React Native 让 我 们 也 可 以 编写 模块 化 的 样式 。 


在 这 一 节 中 ， 我 们 将 学 习 如 何在 React Native 中 创建 并 操作 样式 对 象 。 


5.1.1 内 联 样式 

从 语法 上 来 看 ， 内 联 样式 是 React Native 中 编写 组 件 样式 最 简单 的 一 种 方法 ， 虽 然 它们 通 
常 并 不 是 最 佳 方式 。 正 如 例 5-1 Bras, React Native 中 内 联 样式 的 语法 和 浏览 器 上 的 React 
是 一 样 的 。 


例 5-1 使 用 内 联 样式 
<Text> 
The quick <Text style={{fontStyle: "italic"}}>brown</Text> fox 
jumped over the lazy <Text style={{fontWeight: "bold"}}>dog</Text>. 
</Text> 























内 联 样式 有 一 些 优势 ， 它 们 简单 粗暴 ， 让 你 可 以 快速 地 调试 。 

但 是 由 于 它们 比较 低 效 ， 一 般 情况 下 应 该 避免 使 用 。 内 联 样式 对 象 会 在 每 一 个 这 染 周 期 都 
被 重新 创建 。 即 使 你 想 根 据 props 或 state 对 样式 作 修改 ， 也 不 一 定 需要 使 用 内 联 样式 ， 
我 们 马上 来 看 一 看 应 该 怎么 做 。 


5.1.2 ”对 象 样式 

如 果 你 看 过 内 联 样式 的 语法 ， 会 发 现 可 以 给 style 属性 传 入 一 个 对 象 。 我 们 没有 必要 在 每 
一 次 调用 render 方法 时 都 重新 创建 样式 对 象 ， 所 以 可 以 把 它们 分 离 出 来 ， 如 例 5-2 所 示 。 
例 5-2 style 属性 接收 一 个 JavaScript WR 


const italic = { 
fontStyle: "italic" 





























}; 
const bold = { 
fontWeight: "bold" 
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render() { 

return ( 

<Text> 

The quick <Text style={italic}>brown</Text> fox 

jumped over the lazy <Text style={bold}>dog</Text>. 
</Text> 
)3 
} 


5.1.3 ”使 用 Stylesheet.create 


你 会 发 现 几 乎 所 有 的 React Native 示例 代码 都 使 用 了 Stylesheet.create 方法 。 这 个 函数 是 
一 小 段 的 语法 糖 ， 其 中 加 上 了 一 点 额外 的 好 处 。 














通过 创建 StyleSheet 来 取代 传递 原始 的 JavaScript 对 象 ， 可 以 减少 内 存 分配 数 (从 而 提高 性 
能 )。 它 还 鼓励 你 更 加 整洁 地 组 织 代 码 。StyleSheet 是 不 可 变 的 ， 通 常 能 够 带 来 一 些 便 利 。 





虽然 没有 严格 要 求 必 须 使 用 Stylesheet.create, 但 是 一 般 来 说 ， 它 是 个 不 错 的 选择 。 


有 些 时 候 ， 由 Stylesheet.create 提供 的 不 可 变性 整 大 于 利 ， 例 4-10 的 PanDemo.js 就 是 
一 个 很 好 的 反例 。 回 想 一 下 ， 我 们 需要 根据 触摸 运动 更 新 圆 形 的 位 置 ， 换言之 ， 每 一 次 我 
们 从 PanResponder 接收 到 更 新 的 数据 ， 都 需要 去 更 新 state 以 及 圆 形 的 样式 。 在 这 种 情况 
下 ， 根 本 不 需要 不 可 变性 ， 至 少 控 制 圆 形 位 置 的 样式 是 需要 改变 的 。 因 此 ， 可 以 使 用 简单 
对 象 来 储存 圆 形 的 样式 。 


5.1.4 样式 拼接 


如 果 想 拼接 两 个 以 上 的 样式 ， 应 该 怎么 做 呢 ? 


























先前 已 经 提 到 过 ， 相 比 于 样式 ， 我 们 更 喜欢 复 用 样式 组 件 。 这 是 正确 的 ， 但 有 时 候 可 能 
需要 复 用 样式 。 例 如 ， 有 一 个 按钮 (button) 样式 和 一 个 重点 文本 (accentText) 样式 ， 
你 可 能 想 结合 二 者 来 创建 一 个 重点 按钮 (AccentButton) 组 件 。 


假设 你 的 样式 看 起 来 是 这 样 的 : 




















const styles = Stylesheet.create({ 
button: { 
borderRadius: "8px", 
backgroundColor: "#99CCFF" 
}, 
accentText: { 
fontSize: 18, 
fontWeight: "bold" 
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} 
p; 


然后 通过 简单 地 拼接 样式 创建 了 一 个 拥有 两 种 样式 的 组 件 ( 见 例 5-3) 
例 5-3 style 属性 也 可 以 接收 一 个 对 象 数组 


class AccentButton extends Component { 

render() { 
return ( 

<Text style={[styles.button, styles.accentText]}> 
{this.props.children} 

</Text> 

); 
} 

} 


正如 你 所 看 到 的 ，styte 属性 可 以 接收 一 个 样式 对 象 数 组 。 如 果 愿 意 的 话 ， 也 可 以 在 这 里 
添加 内 联 样 式 ( 见 例 5-4) 。 


例 5-4 可 以 混合 样式 对 象 与 内 联 样式 
class AccentButton extends Component { 
render() { 
return ( 
<Text style={[styles.button, styles.accentText, {color: "#FFFFFF"}]}> 
{this.props.children} 
</Text> 
); 
} 
} 


如 果 遇 到 冲突 ， 比 如 两 个 对 象 都 指定 了 相同 的 届 性 ，React Native 会 帮 有 我 们 解决 冲突 。 样 
式 数组 中 最 右边 的 样式 有 最 高 优先 权 ， 并 且 空 值 (false, null 和 undefined) 会 被 忽略 。 
你 可 以 利用 这 个 特性 来 使 用 条 件 性 的 样式 ， 例 如 ， 我 们 有 一 个 <Button> 组 件 ， 和 希望 它 在 被 
触摸 的 时 候 添 加 额外 的 样式 ， 那 么 可 以 这 样 来 编写 代码 ( 见 例 5-5). 


例 5-5 使 用 条 件 样 式 


<View style={[styles.button, this.state.touching && styles.highlight]} /> 



























































这 种 方式 可 以 帮助 保持 渲染 逻辑 的 简洁 性 。 


上 总而言之， 样式 拼接 是 结合 样式 的 一 种 实用 的 方法 。 对 比 一 下 Web 样式 的 做 法 ， 在 SASS 
中 我 们 采用 @extend 关键 字 ， 或 者 在 原生 CSS 中 对 类 进行 从 套 和 重 写 。 样 式 拼接 是 一 种 更 
为 受 限 的 工具 ， 但 它 也 有 一 定 的 长 处 : 它 保持 了 逻辑 的 简洁 性 ， 并 且 更 容易 推导 出 元 素 使 
用 了 何 种 样式 以 及 是 如 何 使 用 的 。 




















5.2 组织 和 继承 


目前 大 多 数 的 例子 中 都 是 将 样式 代码 放 在 主 JavaScript 文件 中 ， 并 通过 调用 Stylesheet. 
create 来 创建 的 。 对 于 示例 代码 ， 这 种 方法 是 可 行 的 ， 但 并 不 适用 于 实际 应 用 开发 。 那 么 
应 该 怎样 组 织 样 式 呢 ? 在 这 一 节 中 ， 我 们 将 一 起 来 学 习 组 组 样式 的 方法 以 及 如 何 共 享 和 继 














承 样式 。 


5.2.1 导出 样式 对 象 





随 着 样式 变 得 越 来 越 复 杂 ， 你 将 会 考虑 把 它们 从 组 件 JavaScript 代码 中 分 离 出 来 。 一 种 党 

















一 个 名 为 ComponentName/ 的 目录 ， 它 的 结构 如 下 : 


- ComponentName 
|- index.js 
|- styles.js 





随后 在 styles.js 文件 中 创建 并 导出 样式 表 (ILA 5-6)。 
例 5-6 从 JavaScript 文件 中 导出 样式 


import { StyleSheet } from "react-native"; 





const styles = StyleSheet.create({ 
text: { 
color: "#FFQOFF", 
fontSize: 16 
}, 
bold: { 
fontWeight: "bold" 
} 
p; 


export default styles; 





在 index.js 中 ， 我 们 可 以 导入 样式 : 





import styles from "./styles"; 
接着 ， 我 们 就 可 以 在 组 件 中 使 用 了 〈 见 例 5-7) 。 
例 5-7 ”从 外 部 JavaScript 文件 中 导入 样式 


import React, { Component } from "react"; 
import { StyleSheet, View, Text } from "react-native"; 
import styles from "./styles"; 





class ComponentName extends Component { 
render() { 
return ( 


用 的 方法 是 通过 组 件 来 划分 目录 。 假 设 有 一 个 名 为 <ComponentName> 的 组 件 ， 你 可 以 创建 





样式 


<Text style={[styles.text, styles.bold]}> 
Hello, world 

</Text> 

)3 
} 

} 


5.2.2 ”样式 作为 属性 传递 


样式 还 可 以 通过 组 件 属性 进行 传递 。 








尔 可 以 用 这 个 方法 开发 出 可 扩展 的 组 件 ， 从 而 更 有 效 地 被 父 组 件 控制 流程 和 操作 样式 。 例 
如 ， 一 个 组 件 接收 一 个 可 选 的 样式 属性 ( 见 例 5-8)。 通 过 这 种 方式 来 模仿 CSS HY “TRB” 
是 一 种 好 方法 。 











例 5-8 组 件 通 过 属性 接收 样式 对 象 
import React, { Component } from "react"; 
import { View, Text } from "react-native"; 





class CustomizableText extends Component { 

render() { 
return ( 

<Text style={[{fontSize: 18}, this.props.style]}> 
Hello, world 

</Text> 

)3 
} 

} 


通过 把 this. props. style 放置 在 样式 数组 的 末尾 ， 我 们 确保 可 以 重 写 默认 属性 。 


5.2.3 复 用 和 共享 样式 


通常 我 们 更 喜欢 复 用 有 样式 的 组 件 ， 而 不 是 复 用 样式 ， 但 确实 存在 一 些 情况 ， 使 得 我 们 需 
要 在 组 件 间 共享 样式 。 这 时 候 ， 常 用 的 办 法 是 把 项 目 大 概 组 织 成 下 面 这 样 : 




















- js 
|- components 
|- Button 
|- index.js 
|- styles.js 
|- styles 
|- styles.js 
|- colors.js 
|- fonts.js 





通过 划分 组 件 和 样式 到 不 同 的 目录 中 ， 你 可 以 基于 环境 更 清晰 地 保持 每 一 个 文件 的 预期 用 
途 。 一 个 组 件 的 目录 应 该 包含 React 类 ， 以 及 任何 组 件 特定 的 文件 。 共 享 的 样式 应 该 放置 
在 组 件 目录 之 外 。 共 享 样式 可 以 包含 像 调 色 板 、 字 体 、 标 准 内 外 边 距 等 信息 。 
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styles/styles.js 包含 所 有 共享 的 样式 文件 ， 并 进行 了 统一 导出 。 然 后 你 的 组 件 可 以 导入 styles.js 
文件 ， 根 据 需 要 使 用 它们 。 或 者 ， 你 可 能 更 喜欢 直接 从 styles/ 目录 导入 特定 的 样式 。 


由 于 现在 我 们 已 经 将 样式 移 到 了 JavaScript 中 ， 怎 样 组 织 样式 也 成 为 了 项 目 代 码 结构 需要 
考虑 的 一 部 分 ， 但 是 这 里 没有 唯一 正确 的 方法 。 


5.3 ”定位 和 设计 布局 

React Native 的 样式 功能 使 用 中 最 大 的 一 个 改变 是 定位 。CSS 支持 多 种 定位 技术 ， 例 如 
float (浮动 )、 绝 对 定位 、 表 格 布局 和 块 级 布局 等 方法 ， 这 很 容易 使 人 迷惑 。React Native 
的 定位 方案 则 更 加 专注 ， 主 要 依赖 于 flexbox 和 绝对 定位 ， 结 合 一 些 诸 如 margin 和 padding 
这 样 的 属性 。 在 这 一 节 中 ， 我 们 将 学 习 如 何在 React Native 中 设计 布局 ， 并 尝试 开发 一 个 
蒙 德里 安 画 风 (以 抽象 几何 图 案 为 特点 ) 的 布局 应 用 。 


























5.3.1 使 用 flexbox 布 局 


flexbox 是 一 个 CSS3 的 布局 模式 。 不 像 现 有 的 块 级 和 内 联 的 布局 方式 ，flexbox 给 予 我 们 
一 种 无 方向 的 设计 布局 的 方案 。 是 的 ， 垂 直 居 中 终于 变 得 容易 了 ! React Native 重度 依赖 
于 flexbox。 如 果 你 想 阅 读 完 整 的 说 明 ， 可 以 从 MDN 文档 (https://developer.mozilla.org/en- 
US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes) 开始 。 








在 React Native 中 ， 下 列 flexbox 属性 是 可 用 的 : 


e flex 

e flexDirection 
。 flexWrap 

e alignSelf 


e alignItems 
并 且 ， 这 些 相 关 的 属性 也 会 影响 布局 : 


e height 
e width 

e margin 
。 border 


e padding 

















如 果 你 曾经 在 Web 平台 使 用 过 flexbox， 那 么 这 里 不 会 有 太 多 的 惊喜 。fexbox 在 React 
Native 的 设计 布局 中 是 至 关 重 要 的 ， 所 以 这 里 我 们 将 花 一 些 时 间 来 探索 一 下 它 的 用 法 。 


flexbox 背后 主要 的 思想 是 创建 可 预见 结构 的 布局 ， 即 使 给 定 动态 尺寸 的 元 素 也 能 够 创建 。 
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因为 我 们 为 移动 设备 设计 布局 ， 需 要 适应 多 屏幕 尺寸 和 方向 ， 所 以 这 是 一 个 非 








至 可 以 说 是 必要 ) 的 功能 。 
我 们 从 父 元 素 <View> 和 一 些 子 元 素 开 始 : 


<View style={styles.parent}> 
<Text style={styles.child}> Child One </Text> 
<Text style={styles.child}> Child Two </Text> 
<Text style={styles.child}> Child Three </Text> 
</View> 


然后 ， 为 视图 添加 一 些 基础 的 样式 ， 但 尚未 涉及 定位 : 





const styles = StyleSheet.create({ 

parent: { 
backgroundColor: '#F5FCFF', 
borderColor: '#0099AA', 
borderWidth: 5, 
marginTop: 30 

} 

child: { 
borderColor: '#AAQ099', 
borderWidth: 2, 
textAlign: 'center', 
fontSize: 24, 





} 
p; 
最 终 的 布局 如 图 5-1 所 示 。 
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Child One 
Child Two 





Child Three 











5-1: 添加 flex 属性 之 前 的 布局 情况 








接 下 来 ,分 别 为 父子 元 素 添加 flex 属性 。 通 过 添加 flex 属性 ， 我 们 明确 地 将 它 选 为 
flexbox 模式 。flex 需要 一 个 数字 ， 这 个 数字 决定 了 子 元 素 获得 相对 权重 的 大 小 。 把 它们 
都 设置 为 1， 就 获得 了 相等 的 权重 。 





设置 flexDirection: 'coLumn'， 使 得 组 件 纵向 排列 。 如 果 设 置 flexDirection: 'row' ， 那 么 
子 元 素 就 会 横向 排列 。 改 变 的 样式 可 以 查看 例 5-9。 图 5-2 对 比 了 不 同 值 对 布局 的 影响 情况 。 
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Child One Child One} Child Two} Child 
Three 
Child Two 
Child Three 











图 5-2: 设 置 基础 的 flex 和 flexDirection 属性 ;设置 flexDirection 属性 为 coLumn ( 左 ) 和 row ( 右 ) 


例 5-9 flex 和 flexDirection 属性 的 变化 


const styles = StyleSheet.create({ 

parent: { 
flex: 1, 
flexDirection: 'column', 
backgroundColor: '#F5FCFF', 
borderColor: '#0099AA', 
borderWidth: 5, 
marginTop: 30 


flex: 1, 

borderColor: '#AAQ099', 
borderWidth: 2, 
textAlign: "center ' ， 
fontSize: 24, 


p; 
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如 果 我 们 添加 了 alignitems 属性 ， 那 么 子 元 素 将 不 再 自动 扩展 填充 水 平和 垂直 两 个 方向 上 


我 们 设置 了 flexDirection: 'row'， 因 此 会 自 


能 占据 垂直 方向 上 它们 所 需 的 空间 。 


JH, alignItems 属性 决定 了 它们 在 交叉 轴 上 的 位 置 。 
此 它们 是 相互 垂直 的 。flex-start 会 把 子 元 素 放 置 在 顶部 ， 
将 其 放置 在 底部 。 


让 我 们 一 起 来 看 看 添加 alignitems 属性 之 


row 





const styles = StyleSheet.create({ 


parent: { 
flex: 1, 
flexDirection: "row", 
alignItems: "flex-start", 
backgroundColor: "#F5FCFF", 
borderColor: "#0099AA", 


borderWidth: 5, 
marginTop: 30 


Fo 

child: { 
flex: 1, 
borderColor: "#AAQ099", 
borderWidth: 2, 
textAlign: "center", 
fontSize: 24, 

} 

p; 
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7S Mah flexDirection 正 交 ， 


后 发 生 了 什么 吧 (4 





动 填充 行 。 然 而 现在 它们 只 会 


因 
center 将 其 居中 ，flex-end 则 








图 


果 如 








5-3 所 示 )。 





ier 


Child 
Three 





5-3: 设置 alignItenms 在 交叉 轴 上 定位 子 元 素 ， 交 叉 轴 与 fLexDirection 正 交 ; 这 里 分 别 设置 了 
flex-start, center 和 flex-end 
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5.3.2 ”使 用 绝对 定位 


BRT flexbox, React Native 也 支持 绝对 定位 ， 其 工作 方式 基本 上 与 Web 上 的 一 致 ， 你 可 以 
通过 设置 position 属性 来 启用 绝对 定位 。 





position: absoLute 


接着 可 以 通过 left, right, top 和 bottom 这 些 熟悉 的 属性 控制 组 件 的 定位 。 








一 个 绝对 定位 的 子 元 素 的 坐标 是 相对 于 父 元 素 的 位 置 而 存在 的 ， 因 此 你 可 以 在 父 元 素 上 使 
用 fexbox， 然 后 在 子 元 素 上 使 用 绝对 定位 。 














但 是 此 处 仍然 有 一 些 限制 ， 例 如 我 们 没有 z-index 属性 ， 因 此 定位 相互 层 全 视图 会 有 一 些 
复杂 。 一 般 来 说 ， 一 组 视图 的 最 后 一 个 元 素 有 最 高 的 优先 级 。 

绝对 定位 非常 实用 。 举 例 来 说 ， 如 果 你 想 在 状态 栏 下 创建 一 个 容器 视图 ， 那 么 使 用 绝对 定 
位 就 十 分 容易 : 























container: { 
position: "absolute", 
top: 30, 
left: 0, 
right: 0, 
bottom: 0 


} 


5.3.3 学 以 致 用 
现在 尝试 使 用 定位 技术 来 创建 一 个 相对 复杂 的 布局 。 先 前 提 到 过 ， 我 们 要 模仿 蒙 德里 安 的 
画 风 。 图 5-4 是 最 终 的 布局 效果 。 
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图 5-4: 使 用 flexbox 设计 布局 
我 们 应 该 怎样 做 才能 实现 这 样 的 布局 呢 ? 


首先 ， 创 建 一 个 parent 样式 作为 容器 。 我 们 将 会 在 父 元 素 上 使 用 绝对 定位 ， 因 为 这 是 最 合 
适 的 : 除了 屏幕 顶部 状态 栏 的 30 像素 的 偏 移 之 外 ， 我 们 希望 它 可 以 填充 所 有 的 空间 。 我 
们 同时 也 设置 flexDirection 为 column; 








parent: { 
flexDirection: "column", 
position: "absolute", 
top: 30, 
left: 0, 
right: 0, 
bottom: 0 











再 看 看 这 张 图 ， 我 们 可 以 把 它 分 割 成 几 个 较 大 的 格子 。 这 些 分 割 都 是 任意 的 ， 因 此 选择 任 
意 一 种 方式 切割 即 可 。 图 5-5 展示 了 分 割 布局 的 一 种 方式 。 




















Carrier > 9:23 AM = 














图 5-5: 添加 样式 的 顺序 
起 初 我 们 把 布局 切 分 成 顶部 和 底部 两 个 格子 : 


<View style={styles.parent}> 
<View style={styles. topBlock}> 
</View> 
<View style={styles.bottomBlock}> 
</View> 

</View> 


然后 创建 下 一 层 ， 它 包含 一 个 “ 左 列 ”和 “ 右 底 ”部 分 ， 以 及 样式 名 为 cellThree、cellFour 
和 cellFive 的 <View> 组 件 。 





样式 | 77 


<View style={styles.parent}> 
<View style={styles. topBlock}> 
<View style={styles.leftCol}> 
</View> 
<View style={[styles.cellThree, styles.base]} /> 
</View> 
<View style={styles.bottomBlock}> 
<View style={[styles.cellFour, styles.base]}/> 
<View style={[styles.cellFive, styles.base]}/> 
<View style={styles.bottomRight}> 
</View> 
</View> 
</View> 


最 后 一 个 部 分 包含 了 所 有 的 7 个 cell, 例 5-10 展示 了 整个 组 件 的 代码 。 


例 5-10 Styles/Mondrian/index.js 


import React, { Component } from "react"; 
import { StyleSheet, Text, View } from "react-native"; 


import styles from "./style"; 


class Mondrian extends Component { 
render() { 
return ( 
<View style={styles.parent}> 
<View style={styles. topBlock}> 
<View style={styles.leftCol}> 
<View style={[styles.cellOne, styles.base]} /> 
<View style={[styles.base, styles.cellTwo]} /> 
</View> 
<View style={[styles.cellThree, styles.base]} /> 
</View> 
<View style={styles.bottomBlock}> 
<View style={[styles.cellFour, styles.base]} /> 
<View style={[styles.cellFive, styles.base]} /> 
<View style={styles.bottomRight}> 
<View style={[styles.cellSix, styles.base]} /> 
<View style={[styles.cellSeven, styles.base]} /> 
</View> 
</View> 
</View> 
)3 
} 
} 


export default Mondrian; 


MERMER, ERE ( 见 例 5-11). 





例 5-1 


1 Styles/Mondrian/style.js 


import React from "react"; 
import { StyleSheet } from "react-native"; 


const styles = StyleSheet.create({ 


H; 


parent: { 

flexDirection: "column", 

position: "absolute", 

top: 30, 

left: 0, 

right: 0, 

bottom: 0 
}, 
base: { borderColor: "#000000", borderWidth: 5 }, 
topBlock: { flexDirection: "row", flex: 5 }, 
leftCol: { flex: 2 }, 
bottomBlock: { flex: 2, flexDirection: "row" }, 
bottomRight: { flexDirection: "column", flex: 2 }, 
cellOne: { flex: 1, borderBottomWidth: 15 }, 
cellTwo: { flex: 3 }, 
cellThree: { backgroundColor: "#FF0000", flex: 5 }, 
cellFour: { flex: 3, backgroundColor: "#0000FF" }, 
cellFive: { flex: 6 }, 
cellSix: { flex: 1 }, 
cellSeven: { flex: 1, backgroundColor: "#FFFFO0" } 


2 


export default styles; 


5.4 


本 章 介 


小 结 
绍 了 React Native 样式 的 使 用 方法 。 虽 然 大 部 分 原理 与 Web 环境 的 CSS 一 致 ， 但 























React Native 为 样式 引入 了 一 个 不 同 的 结构 和 使 用 方法 。 这 里 有 许多 新 的 内 容 需要 消化 ! 
现在 ， 你 应 该 能 够 熟练 使 用 React Native 的 样式 功能 来 开发 你 想 要 的 移动 界面 了 。 最 妙 的 
是 ， 试 验 样式 功能 非常 容易 ， 模 拟 器 上 “ 重 载 ”的 功能 赋予 了 我 们 紧凑 的 反馈 回路 。( 在 
传统 的 移动 应 用 开发 中 ， 编 辑 样 式 通常 都 需要 重新 构建 应 用 ， 这 很 不 值得 。) 

















如 果 你 


















































想 做 更 多 样式 方面 的 练习 ， 可 以 回 到 前 面 的 《纽约 时 报 》 畅 销 图 书 应 用 或 天 气 应 
































用 ， 尝 试 调整 它们 的 样式 和 布局 。 后 面 的 章节 会 开发 更 多 示例 应 用 ， 你 也 将 得 到 更 多 素材 
用 于 练习 。 
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第 6 章 
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当 你 开发 移动 应 用 时 ， 自 然 会 想到 使 用 宿主 平台 的 特定 API。React Native 使 开发 者 很 容易 
就 能 使 用 诸如 摄像 头 、 地 理 定 位 和 持久 化 存储 这 样 的 API, React Native 通过 引入 模块 的 方 
式 调用 这 些 平台 API， 并 为 我 们 提供 了 方便 的 异步 JavaScript API 来 调用 底层 的 功能 。 








React Native 默认 没有 封装 所 有 的 宿主 平台 API， 一 些 平 台 API 需要 你 自己 封装 或 者 使 用 
React Native 社区 封装 的 模块 。 第 7 章 将 会 介绍 这 部 分 的 内 容 。React Native 官方 文档 是 查 
看 API 支持 情况 最 好 的 参考 。 


本 章 将 介绍 一 些 可 用 的 平台 API。 在 本 章 的 例子 中 ， 我 们 将 对 之 前 的 天 气 应 用 做 一 些 改动 ， 























为 它 添加 地 理 定位 的 功能 ， 使 应 用 可 以 自动 检测 用 户 的 位 置 。 此 外 我 们 还 将 添加 “记忆 ” 
功能 ， 使 其 能 够 保存 先前 的 搜索 记录 。 最 后 ， 我 们 允许 用 户 自行 从 相册 中 选择 背景 图 片 。 


本 章 中 每 一 市 都 会 展示 相应 的 代码 片段 。 此 外 ， 该 应 用 完整 的 代码 包含 在 6.4 节 中 。 


6.1 使 用 定位 API 
对 于 移动 应 用 来 说 ， 获 取 用 户 的 定位 信息 是 非常 有 用 的 。 它 允许 你 根据 用 户 的 相关 信息 更 








好 地 为 用 户 提供 





React Native 内 





服务 。 











地 理 定位 信息 也 在 大 量 应 用 中 被 广泛 使 用 。 


支持 定位 功能 。 这 是 一 个 平台 无 关 的 兼容 性 API。 它 基于 MDN 的 Web 





地 理 定位 API 规 范 返 回 数据 。 我 们 使 用 规范 的 定位 API， 因 此 不 需要 操心 平台 相关 的 问 
题 ， 比 如 地 理 服务 以 及 编写 完全 兼容 的 位 置 感知 的 功能 。 
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6.1.1 获取 用 户 地 理 位 置 
使 用 地 理 定 位 API 获取 用 户 的 位 置信 息 轻 而 易 举 。 如 例 6-1 所 示 ， 我 们 需要 调用 navigator. 


geolocation, 























例 6-1 调用 navigator .geolocation 获取 用 户 位 置 


navigator .geolocation.getCurrentPosition( 
(position) => { 
console. Log(position) ; 
}, 
(error) => {alert(error.message)}, 
{enableHighAccuracy: true, timeout: 20000, maximumAge: 1000} 
); 


位 置信 息 会 打印 到 JavaScript 控制 台中 。 查 看 9.1.2 节 可 以 了 解 控制 台 是 如 何 使 用 的 。 








该 API 遵循 了 地 理 定位 标准 API 的 规范 ， 因 此 我 们 不 需要 单独 导入 它 ， 非 常 容易 使 用 。 

















getCurrentPosition 方法 需要 接收 3 个 参数 : 成 功 回 调 函 数 、 失 败 回 调 函 数 以 及 一 系列 的 
可 选 参数 (geo0ptions)， 其 中 成 功 回 调 函 数 是 必需 的 。 




















传 和 成功 回调 函数 的 position 对 象 包含 了 坐标 信息 和 一 个 时 间 改 。 例 6-2 展示 了 信息 的 格 
式 和 可 能 的 值 。 


例 6-2 调用 getCurrentPosition 的 返回 值 格式 样本 
{ 


coords: { 
speed: -1, 
Longitude: -122.03031802, 
Latitude: 37.33259551999998, 
accuracy:500, 
heading: -1, 
altitude:0, 
altitudeAccuracy:-1 

}, 

timestamp: 459780747046 .605 

} 





geoOptions 必须 是 一 个 对 和 象 ， 它 可 以 有 这 些 键 值 ，timeout、enableHighAccuracy 和 maximumAge, 
timeout 是 其 中 最 重要 的 参数 ， 因 为 它 可 能 会 影响 应 用 的 逻辑 。 














请 注意 ， 直 到 你 将 正确 的 权限 添加 到 Info.plist 文件 (对 应 iOS) 或 者 AndroidManifest.xml 
(对 应 Android) 之 前 ， 上 述 代码 是 不 会 生效 的 。 接 下 来 我 们 会 讨论 这 一 问题 。 


6.1.2 ”处 理 权 限 问题 
定位 数据 属于 敏感 信息 ， 因 此 默认 情况 下 没有 被 启用 。 你 的 应 用 应 该 能 够 处 理 申 请 此 权限 
被 接受 或 被 拒绝 这 两 种 情况 。 
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大 多 数 的 移动 应 用 平台 都 有 定位 权限 这 样 的 概念 。 比 如 在 iOS 平台 上 ， 用 户 可 以 选择 完全 
阻止 定位 服务 ， 或 者 逐一 管理 应 用 的 权限 。 如 果 用 户 拒绝 了 应 用 的 权限 申请 ， 应 用 应 该 永 
远 做 好 定位 服务 调用 失败 的 准备 。 


要 访问 位 置 数据 ， 首 先 你 需要 在 应 用 中 声明 打算 使 用 位 置 数据 。 






































在 iOS 平台 上 ， 你 要 在 Info.plist 文件 中 引入 NSLocationWhenInUseUsageDescription 这 个 
键 。 当 你 创建 新 的 React Native 项 目 时 ， 应 该 已 经 默认 包含 它 了 。 








Æ Android 平台 上 ， 你 需要 往 AndroidManifest.xml 文件 中 添加 以 下 内 容 : 
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" /> 


应 用 程序 第 一 次 申请 定位 服务 时 ， 用 户 将 会 看 到 如 图 6-1 所 示 的 权限 对 话 框 。 





Allow “WeatherProject” to 
access your location while 
you use the app? 


Don’t Allow Allow 














图 6-1: MER 








当 对 话 框 处 于 激活 状态 时 ， 不 会 触发 回调 函数 。 一 旦 用 户 点 击 任意 一 个 选项 之 后 ， 对 应 的 
回调 函数 就 会 被 调用 。 设 置 会 被 保存 起 来 ， 因 此 用 户 下 一 次 不 需要 再 选择 。 





假如 用 户 拒绝 了 权限 申请 ， 如 果 愿 意 的 话 ， 你 可 以 不 做 任何 处 理 ， 但 是 大 多 数 应 用 通常 会 
重新 申请 一 次 权限 。 








6.1.3 在 模拟 器 上 测试 定位 
你 很 可 能 会 在 模拟 器 上 完成 大 部 分 的 开发 和 测试 工作 ， 或 者 至 少 是 在 办 公 桌 上 完成 的 。 那 
么 怎样 才能 测试 不 同 的 位 置 呢 ? 











iOS 模拟 器 可 以 轻而易举 地 模拟 不 同 的 位 置 ， 默 认 情 况 下 会 定位 到 美国 加 利 福 尼 亚 州 附近 
的 Apple 公司 总 部 ， 但 是 通过 菜单 中 的 Debug 一 Location 一 Custom Location... 选项 可 以 指 
定 任何 其 他 的 坐标 (LE 6-2). 











@ iOSSimulator File Edit Hardware [PERE window Help 
= m Slow Animations BT 


| iOS Simulator Color Blended Layers 
Carrier > Color Copied Images 

Color Misaligned Images 

Color Offscreen-Rendered 


Open System Log... 38/ 
Trigger iCloud sync 38 














Location None 
V Custom Location... 
Apple 
City Bicycle Ride 
City Run 
Freeway Drive 














图 6-2: MiOS 模拟 器 中 选择 位 置 








据 并 控制 回放 速度 ， 以 模拟 位 置 的 变化 。 





在 Android 模拟 器 上 ， 你 同样 可 以 选择 要 发 送 的 GPS 坐标 ( 见 图 6-3)。 你 甚至 可 以 导入 数 
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图 6-3: 从 Android 模拟 器 中 选择 位 置 
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通过 选择 不 同 的 位 置 进行 功能 测试 是 个 很 好 的 实践 方法 。 当 然 ， 为 了 严谨 ， 你 应 该 部 署 到 
真实 物理 设备 上 进行 测试 。 





6.1.4 ”监听 用 户 位 置 
你 也 可 以 监听 用 户 的 位 置 ， 每 当 位 置 变化 时 就 会 收 到 更 新 。 这 个 功能 可 以 用 来 长 期 记录 用 
户 的 位 置 ， 或 者 用 来 保证 应 用 接收 到 的 是 最 新 的 位 置信 息 : 





this.watchID = navigator.geolocation.watchPosition((position) => { 
this.setState({position: position}); 


p; 
注意 ， 你 也 可 以 在 组 件 被 卸载 时 清除 监听 器 : 





componentWillUnmount() { 
navigator .geolocation.clearWatch(this.watchID) ; 


} 


6.1.5 限制 

因为 定位 API 基于 MDN 规范 ， 所 以 它 失去 了 一 些 更 高 级 的 基于 定位 的 功能 。 例 如 ，iOS 
系统 提供 了 “地 理 围栏 ”的 API， 该 API 会 在 用 户 进 入 指定 地 理 区 域 (地 理 围栏 ) 之 后 通 
知 应 用 。React Native 暂时 还 不 支持 这 个 API, 

这 意味 着 ， 如 果 你 要 使 用 基于 定位 的 功能 的 话 ， 因 为 它 没有 包含 在 MDN 定位 规范 中 ， 所 
以 你 需要 自己 移植 API。 















































6.1.6 ”改进 天 气 应 用 
SmarterWeather 应 用 是 之 前 天 气 应 用 的 一 个 更 新 的 版 本 ,现在 它 利 用 了 地 理 定位 API。 你 
可 以 在 图 6-4 中 看 到 这 些 变 化 。 


























Carrier > 5:24 PM 1 


Current weather for 


Use Current Location 


Clear 


Current conditions: Sky is Clear 


82.13°F 














B 6-4: 基于 用 户 当前 位 置 显示 天 和 气 预报 


最 值得 一 提 的 是 <LocationButton> 组 件 ， 它 获取 用 户 当 前 的 位 置 并 在 点 击 之 后 触发 回调 函 
数 。<LocationButton> 的 代码 在 例 6-3 中 。 





例 6-3 smarter-weather/LocationButton/index.js 一 一 点 击 按钮 ， 获 取 用 户 位 置 


import React, { Component } from "react"; 


import Button from "./../Button"; 
import styles from "./style.js"; 


const style = { backgroundColor: "#DDDDDD" }; 


class LocationButton extends Component { 
_onPress() { 
navigator .geolocation.getCurrentPosition( 
initialPosition => { 
this.props.onGetCoords( 
initialPosition.coords. latitude, 
initialPosition. coords. longitude 
)3 
}, 


error => { 
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alert(error.message); 


}, 
{ enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 } 
); 
} 
render() { 
return ( 
<Button 
label="Use Current Location" 
style={style} 
onPress={this._onPress.bind(this)} 
/> 
); 
} 


export default LocationButton; 


<LocationButton> 使 用 的 <Button> 组 件 代 码 见 于 本 章 结 尾 ， 它 在 <TouchableHighlight> 中 
简单 地 封装 了 一 个 <Text> 组 件 ， 并 添加 了 一 些 基础 的 样式 。 





























证 





同时 ， 我 们 也 要 更 新 weather_project.js 主 文件 ， 使 其 支持 两 种 查询 方式 ( 见 例 6-4) E 
的 是 ，OpenWeatherMap API 同时 支持 基于 经 纬度 和 邮编 的 查询 方式 。 





例 6-4 添加 __getForecastForCoords 和 getForecastForZip 方法 


const WEATHER_API_KEY = 'bbeb34ebf60ad50f7893e7440a1e2b0b' ; 
const API_STEM = 'http://api.openweathermap.org/data/2.5/weather?'; 


_getForecastForZip: function(zip) { 
this._getForecast( 
*S{API_STEM}q=${zip}&units=imperial&APPID=${WEATHER_API_KEY}*); 
}, 


_getForecastForCoords: function(lat, lon) { 
this._getForecast( 
*S{API_STEM}Lat=${Lat}&Lon=${lon}&units=imperial&APPID=${WEATHER_API_KEY}*); 
}, 


_getForecast: function(url, cb) { 
fetch(url) 
.then((response) => response. json()) 
.then((responseJSON) => { 
console. Log(responseJSON) ; 
this.setState({ 
forecast: { 
main: responseJSON.weather[0].main, 
description: responseJSON.weather[0].description, 
temp: responseJSON.main. temp 
} 
}); 





}) 
.catch( (error) => { 
console.warn(error); 
}) 
} 


最 后 ， 我 们 在 主 视图 导入 <LocationButton> 组 件 ， 将 getForecastForCoords 作为 回调 函数 。 





<LocationButton onGetCoords={this._getForecastForCoords}/> 


这 里 省 略 了 样式 的 更 新 ， 因 为 应 用 完整 的 代码 已 经 附 在 本 章 结 尾 。 





如 果 你 要 正式 上 线 给 用 户 使 用 ， 那 么 还 有 大 量 的 工作 需要 完成 。 例 如 ， 一 个 完整 的 应 用 应 
该 有 更 好 的 错误 提示 以 及 更 完善 的 界面 反馈 等 。 但 是 获取 定位 信息 这 样 基础 的 功能 确实 是 
出 乎 意料 地 简单 ! 


6.2 ”使 用 用 户 图 片 与 摄像 头 


这 部 分 需要 项 目的 原生 代码 
本 节 中 的 示例 ， 仅 适用 于 使 用 react-native-init 创建 的 项 目 或 使 用 create- 
react-native-app“ 弹 出 ”的 项 目 。 要 了 解 更 多 信息 ， 请 参见 附录 C。 

















能 够 使 用 本 地 图 片 和 摄像 头 是 许多 移动 应 用 又 一 个 重要 的 功能 。 在 这 一 节 中 ， 我 们 将 探索 
如 何 与 用 户 图 片 数据 和 摄像 头 交互 。 














本 节 仍 然 使 用 SmarterWeather 这 个 项 目 ， 让 它 可 以 读 取 用 户 本 地 的 图 片 作为 应 用 背景 。 


6.2.1 使 用 相机 模块 进行 交互 
React Native 提供 了 一 个 相机 的 AP 获取 用 户 设备 本 地 的 图 片 或 从 摄像 头 拍摄 照片 。 


与 相机 模块 交互 最 基础 的 用 法 并 不 是 太 复 杂 。 首 先 需 要 照常 导入 CameraRoll 模块 。 




















import { CameraRoll } from "react-native"; 
然后 ， 我 们 使 用 该 模块 来 获取 用 户 图 片 相关 的 信息 ， 如 例 6-5 所 示 。 


例 6-5 CameraRoll.getPhotos 的 基础 用 法 


CameraRoll.getPhotos( 
{first: 1}, 
(data) => { 

console. Log(data); 

F; 
(error) => { 

console.warn(error); 


})s 
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我 们 通过 合适 的 参数 来 调用 getPhotos 方法 ， 它 返回 了 一 些 相机 图 像 的 相关 数据 。 





在 SmarterWeather 应 用 中 ， 我 们 用 一 个 新 的 组 件 <PhotoBackdrop> ( 见 例 6-6) 替换 最 顶层 





的 <Image> 组 件 。 目 前 <PhotoBackdrop> 组 件 只 是 简单 地 从 用 户 的 相机 获取 最 新 


例 6-6 smarter-weather/PhotoBackdrop/index.js 


import React, { Component } from "react"; 
import { Image, CameraRoll } from "react-native"; 
import styles from "./style"; 


class PhotoBackdrop extends Component { 
constructor(props) { 
super(props); 
this.state = { photoSource: null }; 


} 


componentDidMount() { 
CameraRoll.getPhotos({ first: 1 }).then(data => { 








Pal 








片 。 





this.setState({ photoSource: { uri: data.edges[3].node.image.uri } }); 


}, error => { 
console.warn(error); 


})3 
} 
render() { 
return ( 
<Image 
style={styles. backdrop} 
source={this.state.photoSource} 
resizeMode="cover" 
> 
{this.props.children} 
</Image> 
); 
} 


} 


export default PhotoBackdrop; 





CameraRoll.getPhotos 需要 3 个 参数 : 一 个 带 参数 的 对 象 、 一 个 成 功 回 
回调 函数 。 





6.2.2 ”通过 getPhotoParams 获 取 图 片 


调 函 数 和 一 个 错误 


getPhotoParams 对 象 接收 一 系列 参数 。 可 以 从 React Native 源码 (https://github.com/facebook/ 
react-native/blob/master/Libraries/CameraRoll/CameraRoll.js#L46) 查看 哪些 是 可 用 的 参数 。 





数字 类 型 ， 想 要 逆序 显示 的 照片 数目 ( 即 最 新 保存 的 照片 )。 





字符 串 类 型 ， 一 个 匹配 前 一 次 调用 getPhotos 的 page_info {end_cursor} 信息 的 指针 。 


groupTypes 
字符 串 类 型 ， 指 定 特定 的 组 别 来 过 滤 结 果 。 可 能 是 Albun、ALL 和 Event 等 值 。 完 整 的 
GroupTypes 可 在 源码 中 查看 。 


groupName 


字符 串 类 型 ， 在 该 组 指定 一 个 过 滤器 ， 例 如 Recent Photos 或 一 个 相册 名 称 。 





assetType 
IEA AUL, Photos sk Videos 中 的 一 个 ， 为 资源 类 型 指定 一 个 过 滤器 。 


mimeTypes 


字符 串 数组 类 型 ， 基 于 MIME 类 型 进行 过 滤 (例如 image/jpeg) 。 





例 6-5 中 简单 地 使 用 了 getPhotos 方法 ， 我 们 的 getPhotoParams 对 象 相当 简洁 : 





{first: 1} 


简单 来 说 ， 这 指明 了 我 们 要 寻找 最 近 的 图 片 。 








6.2.3 ”从 相机 演 染 一 张 图 片 
从 相机 获取 图 片 之 后 应 该 怎样 渲染 呢 ?” 让 我 们 来 看 成 功 回 调子 数 : 








(data) => { 
this.setState({ 
photoSource: {uri: data.edges[0].node.image.uri} 


})}, 
这 个 数据 对 象 的 结构 不 是 非常 直观 ， 因 此 你 可 以 使 用 调试 器 来 审查 对 象 。 每 一 个 data. 
edges 中 的 对 象 都 用 一 个 节点 (node) 属性 来 表示 一 张 图 片 。 我 们 可 以 从 这 里 获取 实际 资 
源 的 URI, 











P| 








你 可 能 会 想到 ， 一 个 <Image> 组 件 可 以 接收 一 个 URI 属性 。 所 以 ， 可 以 通过 正确 设置 
源 属性 的 方式 从 相机 渲染 一 张 图 片 。 





F 





<Image source={this.state.photoSource} /> 








好 了 ， 现 在 可 以 看 到 包含 图 片 的 最 终 效果 了 ， 如 图 6-5 所 示 。 
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Current weather for 














6-5: 从 相机 泻 染 一 张 图 片 


6.2.4 ”上传 图 片 至 服务 器 
如 果 想 上 传 照片 到 其 他 地 方 该 怎么 办 呢 ? React Native 的 KHR 模块 包含 了 一 个 内 置 的 图 片 
上 传 功 能 。 基 础 的 使 用 方式 如 下 所 示 : 


let formdata = new FormData(); 
formdata.append('image', {...this.state.randomPhoto, name: 'image.jpg'}); 


xhr.send(formdata) ; 


XHR 是 XMLHttpRequest 的 缩写 。React Native 基于 iOS 网 络 API 实现 了 XHR API。 与 定位 
API 类 似 ，React Native 的 XHR 也 是 基于 MDN 规范 实现 的 。 


相 比 于 Fetch API， 使 用 XHR 进行 网 络 请 求 稍微 有 点 复杂 ， 但 是 基本 用 法 就 像 例 6-7 这 样 。 
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Gil 6-7 通过 XHR 发 送 POST 请 求 来 上 传 照片 的 基本 结构 
let xhr = new XMLHttpRequest(); 
xhr.open('POST', 'http://posttestserver.com/post.php'); 
let formdata = new FormData(); 
formdata.append('image', {...this.state.photo, name: 'image.jpg'}); 
xhr.send(formdata) ; 


这 里 省 略 了 各 种 注册 XHR 请 求 的 回调 函数 。 


6.3 AsyncStore 持 久 化 数据 存储 


大 多 数 的 应 用 需要 持续 记录 各 式 各 样 的 数据 。 我 们 应 该 怎样 在 React Native 中 实现 这 个 功 


能 呢 ? 











iOS 为 我 们 提供 了 AsyncStorage， 一 个 应 用 于 全 局 的 键 值 对 存储 API。 如 果 你 曾经 使 用 过 
Web 平台 上 的 LocaLStorage， 那 么 AsyncStorage 应 该 会 让 你 觉得 非常 熟悉 。AsyncStorage， 
顾名思义 ， 是 一 个 异步 的 操作 。 这 个 API 也 相当 简洁 ， 是 一 个 React Native 默认 自 带 的 模 
块 。 下 面 我 们 来 看 看 如 何 使 用 它 。 


AsyncStorage 使 用 的 储存 键 可 以 是 任意 字符 串 ， 它 通常 使 用 这 样 的 格式 : @AppName:key。 
例如 : 





























const STORAGE_KEY = '@SmarterWeather:zip'; 





AsyncStorage 模块 在 调用 getItem 和 setItem 方法 之 后 都 会 返回 一 个 promise 对 象 。 比 如 在 
SmarterWeather 中 ， 我 们 可 以 在 componentDidMount 方法 中 加 载 存 储 的 邮编 : 


AsyncStorage.getItem(STORAGE_KEY) 
.then((value) => { 
if (value !== null) { 
this._getForecastForZip(vaLue) ; 
} 
}) 


.catch( (error) => console. log('AsyncStorage error: 
.done(); 


1 


+ error.message) ) 


接着 ， 在 _getForecastForZip 方法 中 ， 我 们 储存 邮编 : 





AsyncStorage.setItem(STORAGE_KEY, zip) 
.then(() => console.log('Saved selection to disk: ' + zip)) 
.catch( (error) => console.log('AsyncStorage error: ' + error.message)) 
.done(); 





























AsyncStorage 同时 也 提供 了 删除 键 值 、 合 并 键 值 和 获取 所 有 可 用 键 值 等 方法 。 
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6.4 SmarterWeather 应 用 
本 章 中 所 有 的 例子 都 可 以 在 smarter-weather 目录 下 找到 











。 该 应 用 在 第 3 章 的 基础 上 加 以 修 





w, 已 经 有 了 一 些 变化 ， 因 此 我 们 再 看 一 下 整个 应 用 的 结构 (ILB 6-8)。 








例 6-8 SmarterWeather 应 用 的 项 目 内 容 


smarter -weather 
I~ Button 

| H index. js 

| lt style.js 
| 一 Forecast 

| CC index. js 
| 一 LocationButton 
| H index. js 

| lt style.js 
| 一 PhotoBackdrop 
| | flowers.png 

| °F index. js 

| H local_image.js 
| lt style.js 

— index. js 

| 一 open_weather_map.js 
| 六 styles 

| CC typography.js 
[一 weather_project.js 





顶层 组 件 位 于 weather_project.js 中 。 共 享 字体 样式 位 于 styles/typography.js H. Forecast/, 


PhotoBackdrop/, Button/ 和 LocationButton/ 目录 包含 了 智能 天 气 应 用 中 所 有 的 React 组 件 。 


6.4.1 <WeatherProject> 组 件 


顶层 <WeatherProject> 组 件 在 weather_project.js 文件 是 
AsyncStorage 模块 储存 最 近 搜 索 的 位 置信 息 的 功能 。 


例 6-9 smarter-weather/weather_project.js 


import React, { Component } from "react"; 
import { 

StyleSheet, 

Text, 

View, 

TextInput, 

AsyncStorage, 

Image 
} from "react-native"; 


import Forecast from "./Forecast"; 
import LocationButton from "./LocationButton"; 
import textStyles from "./styles/typography.js"; 








下 


T 


E ( 见 例 6-9)。 这 里 包含 了 使 用 








const STORAGE_KEY = "@SmarterWeather:zip"; 


import OpenWeatherMap from "./open_weather_map"; 











// 该 版 本 使 用 fLowers.png 这 个 本 地 资源 
import PhotoBackdrop from "./PhotoBackdrop/local_image"; 


// 该 版 本 允许 你 选择 一 张 照片 
// import PhotoBackdrop from './PhotoBackdrop'; 











class WeatherProject extends Component { 
constructor(props) { 
super (props); 
this.state = { forecast: null }; 


} 


componentDidMount() { 
AsyncStorage 
.getItem(STORAGE_KEY) 
.then(value => { 
if (value !== null) { 
this._getForecastForZip(value) ; 
} 
}) 
.catch(error => console.error("AsyncStorage error: " + error.message) ) 
.done(); 
} 


_getForecastForZip = zip => { 


// 存储 邮编 地 址 


AsyncStorage 
.setItem(STORAGE_KEY, zip) 
.then(() => console.log("Saved selection to disk: " + zip)) 
.catch(error => console.error("AsyncStorage error: " + error.message) ) 
.done(); 


OpenWeatherMap.fetchzipForecast(zip).then(forecast => { 
this.setState({ forecast: forecast }); 
H); 
}; 


_getForecastForCoords = (lat, lon) => { 
OpenWeatherMap.fetchLatLonForecast(lat, lon).then(forecast => { 
this.setState({ forecast: forecast }); 
p; 
Fs 


_handleTextChange = event => { 
let zip = event.nativeEvent. text; 
this. _getForecastForZip(zip); 


33 
render() { 
let content = null; 
if (this.state.forecast !== null) { 
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content = ( 
<View style={styles.row}> 
<Forecast 
main={this.state.forecast.main} 
temp={this.state.forecast.temp} 
/> 
</View> 
)3 
} 


return ( 
<PhotoBackdrop> 
<View style={styles.overlay}> 
<View style={styles.row}> 
<Text style={textStyles.mainText}> 
Forecast for 
</Text> 


<View style={styles.zipContainer }> 
<TextInput 
style={[textStyles.mainText, styles.zipCode]} 
onSubmitEditing={this. handleTextChange} 
underlineColorAndroid="transparent" 
/> 
</View> 
</View> 


<View style={styles.row}> 
<LocationButton onGetCoords={this._getForecastForCoords} /> 
</View> 


{content} 


</View> 
</PhotoBackdrop> 
)3 
} 
} 


const styles = StyleSheet.create({ 
overlay: { backgroundColor: "rgba(0,0,0,0.1)" }, 
row: { 
flexDirection: "row", 
flexWrap: "nowrap", 
alignItems: "center", 
justifyContent: "center", 
padding: 24 
}, 
zipContainer: { 
borderBottomColor: "#DDDDDD", 
borderBottomWidth: 1, 
marginLeft: 5, 
marginTop: 3, 
width: 80, 
height: textStyles.baseFontSize * 2, 





justifyContent: "flex-end" 
}, 
zipCode: { flex: 1 } 
}); 


export default WeatherProject; 


它 使 用 了 styles/typography.js 中 的 共享 样式 ( 见 例 6-10) . 


例 6-10 共享 字体 样式 在 smarter-weather/styles/typography.js 中 





import { StyleSheet } from "react-native"; 
const baseFontSize = 24; 


const styles = StyleSheet.create({ 


bigText: { fontSize: baseFontSize + 8, color: "#FFFFFF" }, 


mainText: { fontSize: baseFontSize, color: "#FFFFFF" } 
}); 


// 允许 在 其 他 地 方 使 用 


styles["baseFontSize"] = baseFontSize; 








export default styles; 


6.4.2 ”<Forecast> 组 件 





<Forecast> 组 件 展示 了 包括 温度 在 内 的 预报 信息 ， 被 其 上 的 <WeatherProject> 组 件 使 用 。 





该 组 件 的 代码 见于 例 6-11。 
i] 6-11 <Forecast> 组 件 泻 染 关于 预报 的 信息 


import React, { Component } from "react"; 
import { Text, View, StyleSheet } from "react-native"; 


class Forecast extends Component { 
render() { 
return ( 
<View style={styles.forecast}> 
<Text style=> 
{this.props.temp}°F 
</Text> 
<Text style=> 
{this.props.main} 
</Text> 
</View> 
)3 
} 
} 


const styles = StyleSheet.create({ forecast: { alignItems: "center" } }); 


export default Forecast; 
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6.4.3 <Button>28 4# 


<Button> 组 件 是 一 个 可 复 用 的 容器 样式 组 件 。 它 提供 了 一 个 由 <TouchableHighlight> 包装 的 
拥有 合理 样式 的 <Text> 组 件 。 组 件 的 主要 文件 在 例 6-12 中 ， 关 联 的 样式 文件 在 例 6-13 中 。 














例 6-12 按钮 组 件 提供 一 个 拥有 合理 样式 的 、 由 <TouchableHighlight> 包装 的 <Text> 组 件 


import React, { Component } from "react"; 
import { Text, View, TouchableHighlight } from "react-native"; 
import styles from "./style"; 


class Button extends Component { 
render() { 
return ( 
<TouchableHighlight onPress={this.props.onPress}> 
<View style={[styles.button, this.props.style]}> 
<Text> 
{this.props. label} 
</Text> 
</View> 
</TouchableHighlight> 
)3 
} 
} 


export default Button; 
例 6-13 按钮 组 件 的 样式 
import { StyLeSheet } from "react-native"; 
const styles = StyleSheet.create({ 
button: { backgroundColor: "#FFDDFF", padding: 25, borderRadius: 5 } 


p; 


export default styles; 


6.4.4 <LocationButton>2H {# 


当 被 点 击 时 ，<LocationButton> 获取 用 户 的 位 置信 息 并 触发 一 个 回调 。 组 件 的 主 JavaScript 
文件 在 例 6-14 中 ， 样 式 文件 在 例 6-15 中 。 














例 6-14 <LocationButton> 组 件 


import React, { Component } from "react"; 


import Button from "./../Button"; 
import styles from "./style.js"; 


const style = { backgroundColor: "#DDDDDD" }; 





class LocationButton extends Component { 


_onPress() { 


navigator .geolocation.getCurrentPosition( 


initialPosition 


=> { 


this.props.onGetCoords( 
initialPosition. coords. latitude, 
initialPosition.coords. Longitude 


) ; 


error => { 


alert(error.message); 


}, 


{ enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 } 


); 
} 


render() { 
return ( 
<Button 


label="Use Current Location" 


style={style} 


onPress={this._onPress.bind(this)} 


/> 
); 


export default LocationButton; 


例 6-15 <LocationButton> 的 样式 


import { StyleSheet } 


from "react-native"; 


const styles = StyleSheet.create({ 
locationButton: { width: 200, padding: 25, borderRadius: 5 } 


p; 


export default styles; 


6.4.5 ”<PhotoBackdrop> 组 件 


为 了 说 明 选 择 背 景 图 片 的 不 同方 法 ， 这 里 提供 了 两 种 版 本 的 <PhotoBackdrop> 组 件 。 第 一 
个 版 本 见于 例 6-16， 在 GitHub 仓库 里 对 应 local_image,js 文件 ， 它 通过 导入 调用 加 载 了 标 
准 的 图 片 资 源 。 第 二 个 版 本 见于 例 6-17， 对 应 GitHub 仓库 的 camera_roll_example.js 文件 ， 




















它 允 许 用 户 从 相册 里 选择 图 














片 。 


例 6-16 最 初版 本 的 local_ image.js， 使 用 一 个 简单 的 导入 调用 


import React, { Component } from "react"; 


import { Image } from 


"react-native"; 
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import styles from "./style.js"; 
class PhotoBackdrop extends Component { 
render() { 
return ( 
<Image 
style={styles. backdrop} 
source={require("./flowers.png")} 
resizeMode="cover" 


{this.props.children} 
</Image> 
); 
} 
} 


export default PhotoBackdrop; 


例 6-17  src/smarter-weather/PhotoBackdrop/index.js 使 用 代码 从 相册 中 选择 一 张 图 片 


import React, { Component } from "react"; 
import { Image, CameraRoll } from "react-native"; 
import styles from "./style"; 


class PhotoBackdrop extends Component { 
constructor(props) { 
super(props); 
this.state = { photoSource: null }; 


} 


componentDidMount() { 
CameraRoll.getPhotos({ first: 1 }).then(data => { 
this.setState({ photoSource: { uri: data.edges[3].node.image.uri } }); 
}, error => { 
console.warn(error); 


H); 
} 
render() { 
return ( 
<Image 
style={styles. backdrop} 
source={this.state.photoSource} 
resizeMode="cover" 
> 
{this.props.children} 
</Image> 
)3 
} 


} 


export default PhotoBackdrop; 





这 两 个 版 本 都 共享 了 相同 的 样式 ， 如 例 6-18 所 示 。 
例 6-18 两 个 版 本 的 <PhotoBackdrop> 都 使 用 这 个 样式 表 


import { StyleSheet } from "react-native"; 


export default StyleSheet.create({ 
backdrop: { 
flex: 1, 
flexDirection: "column", 
width: undefined, 
height: undefined 
Fs 
button: { flex: 1, margin: 100, alignItems: "center" } 
}); 


6.5 小 结 


在 本 章 中 ， 我 们 对 天 气 应 用 进行 了 一 些 修改 ， 然 后 接触 了 地 理 定位 、 相 机 (CameraRol1) 
和 持久 化 存储 (Asyncstorage) API， 最 后 学 习 了 如 何 将 这 些 API 整合 到 应 用 中 去 。 





如 果 React Native 提供 了 宿主 平台 API 的 支持 ， 那 么 使 用 起 来 就 会 得 心 应 手 。 但 是 假如 
React Native 不 支持 某 个 API， 比 如 视频 回放 的 功能 ， 这 时 你 需要 使 用 一 个 非 JavaScript 实 
现 的 类 库 或 模块 ， 那 应 该 怎么 做 呢 ? 下 一 章 将 详细 介绍 这 种 情况 的 解决 方案 。 
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第 7 章 





模块 和 原生 代码 


这 部 分 需要 项 目的 原生 代码 
本 节 中 的 示例 , 仅 适用 于 使 用 react-native-init 创建 的 项 目 或 使 用 create- 
react-native-app“ 弹 出 ”的 项 目 。 要 了 解 更 多 信息 ， 请 参见 附录 C 














第 6 章 介 绍 了 一 些 如 何 与 React Native 封装 的 宿主 平台 API 交互 的 知识 。 这 些 API 已 经 集 


成 到 React Native， 因 此 
应 该 怎么 做 呢 ? 




















使 用 起 来 非常 方便 。 如 果 要 使 用 一 个 React Native 不 支持 的 API, 


本 章 将 介绍 如 何 通 过 mpm 安装 由 React Native 社区 编写 的 模块 。 同时， 我 们 也 要 深入 
学 习 react-native-video 的 安装 过 程 ， 以 及 RCTBridgeModule 是 如 何人 允许 用 户 为 现 有 的 
Objective-C API 添加 JavaScript API 的 。 最 后 ， 我 们 再 来 看 如 何 导入 纯 JavaScript 类 库 到 你 























的 工程 中 ， 以 及 如 何 管 理 





依赖 。 





本 章 会 涉及 一 些 Objective-C 和 Java 代码 ， 不 过 别 担心 ， 我 们 会 放 慢 脚步 。 完 整 的 iOS 和 


Android 移动 应 用 开发 的 








介绍 超出 了 本 书 的 范围 ， 但 是 我 们 也 会 一 起 学 习 一 些 例子 。 








7.1 使 用 npm 安 装 JavaScript 类 库 
在 讨论 原生 模块 工作 原理 之 前 ， 先 来 看 外 部 依赖 通常 是 怎样 安装 的 。React Native 使 








用 npm 进行 依赖 管理 。 
JavaScript 工程 ， 而 不 仅 











npm 虽然 是 一 个 Node.js 的 包 管 理 器 ， 但 npm 仓库 囊括 了 所 有 
仅 是 Node 平台 。npm 使 用 一 个 名 为 package.json 的 文件 来 储存 包 


括 一 系列 依赖 在 内 的 项 目 元 数据 。 
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我 们 从 一 个 全 新 的 项 目 开 始 : 





react-native init Depends 


创建 一 个 新 工程 之 后 ， 你 的 package.json 文件 看 起 来 如 例 7-1 所 示 。 














$l 7-1 Depends/package.json 


{ 

"name": "Depends", 

"version": "0.0.1", 

"private": true, 

"scripts": { 
"start": "node node_modules/react-native/local-cli/cli.js start", 
"test": "jest" 

}, 

"dependencies": { 
"react": "16.0.0-alpha.12", 
"react-native": "0.45.1" 

}, 

"devDependencies": { 
"babel-jest": "20.0.3", 
"babel-preset-react-native": "2.0.0", 
"Jest": "20.0.4", 
"react-test-renderer": "16.0.0-alpha.12" 

}, 

"jest": { 
"preset": "react-native" 

} 

} 











目前 为 止 ， 项 目 最 顶层 的 依赖 是 react 和 react-native。 让 我 们 添加 其 他 的 依赖 。 





lodash 库 提供 了 一 系列 实用 的 工具 函数 ， 例 如 针对 数组 的 shuffle 函数 。 我 们 在 安装 时 附 
带 --save 参数 ， 它 将 会 被 添加 到 依赖 列表 中 : 





uy 


npm install --save Lodash 


现在 ， 你 的 package.json 文件 被 更 新 如 下 : 





"dependencies": { 
"Lodash": "44.17.4", 
"react": "16.0.0-alpha.12", 
"react-native": "0.45.1" 


} 
如 果 想 在 React Native 应 用 中 使 用 lodash， 可 以 这 样 引 入 它 : 





import _ from "lodash"; 


现在 ， 我 们 使 用 lodash 来 打印 一 个 随机 数 : 


import _ from "lodash"; 
console.warn("Random number: " + _.random(0, 5)); 
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成 功 输出 了 ! 但 是 其 他 模块 是 怎样 的 呢 ? 我 们 可 以 通过 npm install 引入 任何 第 三 方 包 吗 ? 





答案 当然 是 “可 以 ”， 但 有 一 些 额 外 的 说 明 。 例 如 ， 任 何 涉及 DOM 操作 的 方法 都 会 运行 
失败 。 和 现 有 的 第 三 方 包 集 成 可 能 需要 一 些 技巧 ， 因 为 大 多 数 类 库 都 假定 了 它们 运行 的 环 
境 。 但 一 般 而 言 你 可 以 使 用 任何 JavaScript 包 ， 也 可 以 和 其 他 JavaScript 工程 一 样 使 用 npm 
来 管理 项 目 依 赖 。 


7.2 安装 包含 原生 代码 的 第 三 方 组 件 


既然 已 经 学 会 了 如 何 通过 npm 添加 外 部 JavaScript 类 库 ， 那 么 现在 让 我 们 通过 npm 安装 一 
个 React Native 组 件 吧 。 在 这 一 节 中 ， 我 们 主要 演示 如 何 使 用 react-native-video。 这 个 库 
是 GitHub 项 目 react-native-community 中 的 一 部 分 ， 集 合 了 高 质量 的 React Native 模块 。 


























react-native-video 2H (+ if 7 Œ npm 仓库 (https://www.npmjs.com/package/react-native- 
video) 中 。 我 们 可 以 通过 npm install 将 其 添加 到 项 目 里 : 














npm install react-native-video --save 
如 果 是 传统 的 Web 开发 ， 那 么 一 切 都 已 经 完成 了 ! react-native-video 已 经 可 以 在 项 目 
中 使 用 了 。 然 而 ， 这 个 模块 需要 对 底层 的 iOS 和 Android 项 目 进行 修改 ， 所 以 还 需要 一 个 
步骤 : 





react-native link 





上 述 这 条 命令 做 了 什么 事情 呢 ? 它 修改 了 底层 的 i0S 和 Android 项 目 。 对 于 iOS， 这 可 能 意 
味 着 编辑 AppDelegate.m 和 Xcode 项 目 文件 。 对 于 Android， 这 可 能 包括 对 MainApplication. 
java、settings.gradle 和 build.gradle 的 修改 。 通 常 模块 会 在 安装 指令 中 指明 它 的 要 求 。 





注意 ，react-native link 只 会 对 使 用 react-native init 生成 的 项 目 ， 或 者 create-react- 
native-app 创建 后 迁移 的 应 用 起 作用 。 附 录 C 的 “从 Expo 分 离 ” 会 讨论 如 何 将 create- 
react-native-app 项 目 迁移 到 完整 的 React Native 项 目 。 





如 有 果 你 疫 有 使 用 自动 生成 的 应 用 ， 那 么 就 需要 根据 模块 作者 提供 的 指令 ， 手 动 更 新 项 目的 
文件 。 





现在 已 经 安装 好 了 react-native-video 模块 ， 让 我 们 来 测试 一 下 。 这 个 步骤 需要 一 个 MP4 
视频 文件 。 我 使 用 了 Flickr (https://www.flickr.com/photos/michal_tuski/27831372885/) 上 面 
的 一 个 公共 视频 。 


在 React Native 中 ，MP4 静态 资源 的 使 用 方式 和 图 片 一 样 ， 你 可 以 像 这 样 加 载 视频 文件 : 




















let warblerVideo = require("./warbler.mp4"); 





A 
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使 用 视频 组 件 
我 们 可 以 在 JavaScript 代码 中 引入 <Video> 组 件 了 : 


import Video from "react-native-video" 


然后 你 就 可 以 像 使 用 普通 组 件 一 样 使 用 它 了 。 这 里 我 设置 了 一 些 可 选 的 属性 : 





<Video source={require("./warbler.mp4")} // 可 以 是 URL 或 本 地 文件 





rate={1.0} // 9 表示 暂停 ，1 表 示 正 常 
volume={1.0} // 0 表示 静音 ，1 表 示 正 常 
muted={false} // 是 否 完全 静音 
paused={false} // 是 否 完 全 暂停 播放 
resizeMode="cover" // 是 否 按 高 宽 比 覆盖 整个 屏幕 
repeat={true} // 是 否 自动 循环 播放 





style={styles.backgroundVideo} /> 
哇 ! 我 们 添加 了 一 个 视频 组 件 ! 这 个 组 件 应 该 可 以 同时 在 Android 和 iOS 平台 上 使 用 。 


如 你 所 见 ， 引 入 包含 原生 代码 的 第 三 方 模块 的 过 程 很 简单 。 在 npm 仓库 里 ， 还 有 大 量 这 样 
的 组 件 ， 它 们 通常 都 使 用 了 react-native- pig. Peel ARETE MEME, A Atk x ADF ie FMI 
些 资 源 。 


7.3 Objective-C 原 生 模 块 


现在 我 们 已 经 知道 如 何 安装 和 使 用 包含 原生 代码 的 模块 ， 下 面 让 我 们 深入 了 解 一 下 它 在 底 
层 是 如 何 工 作 的。 我 们 从 Objective-C 方面 开始 介绍 。 























7.3.1 编写 iOS 的 Objective-C 原 生 模 块 


既然 使 用 过 了 react-native-video 组 件 ， 那 么 我 们 一 起 看 看 模块 在 底层 究竟 是 怎样 工作 
的 吧 。 





react-native-video 是 一 个 React 引用 原生 模块 的 组 件 。React Native 文档 是 这 样 定义 原生 
模块 的 :“ 一 个 实现 了 RCTBridgeModule 协议 的 Objective-C 类 。”(RCT 是 React 的 缩写 。) 


编写 Objective-C 代码 不 是 React Native 标准 开发 流程 的 一 部 分 ， 所 以 不 用 担心 ， 这 不 是 


必要 的 知识 ! 当然 ， 如 果 有 基础 的 代码 阅读 能 力 ， 可 以 看 懂 代 码 的 话 ， 会 对 你 有 很 大 的 帮 
助 ， 即 便 你 还 没有 打算 实现 自己 的 原生 模块 。 











如 果 你 之 前 从 未 使 用 过 Objective-C， 可 能 大 多 数 的 语法 会 让 你 感到 困惑 。 没 关系 ， 慢 慢 
来 。 首 先 我 们 开发 一 个 基础 的 “Hello, World” 模 块 。 





H 


Objective-C 类 通常 有 一 个 以 h 结尾 的 头 文件 ， 它 包含 了 类 的 API。 但 实际 上 我 们 在 .m 
实现 功能 。 我 们 从 编写 HelloWorld.h 文件 开始 ， 如 例 7-2 所 示 。 
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例 7-2 HelloWorld.h 
#import <React/RCTBridgeModule.h> 


@interface HelloWorld : NSObject <RCTBridgeModule> 
@end 


个 文件 有 什么 用 处 呢 ? 在 第 一 行 ， RCTBridgeModule 头 文件 〈 注 意 ，# 符号 不 
pend 而 是 导入 语句 的 一 部 分 )。 下 一 行 ， 我 们 接着 定义 了 一 个 HelloWorld 类 ， 它 继 
承 自 NSObject 并 实现 了 Uae API， 最 后 通过 Qend 完成 API 的 定义 。 











由 于 历史 原因 ， 许 多 Objective-C 的 类 型 都 有 NS 前 级 (NSString, NSObject 等 ) 。 
现在 来 看 看 具体 的 实现 〈 见 例 7-3)。 


例 7-3 HelloWorld.m 


#import "HelloWorld.h" 
#import <React/RCTLog.h> 


@implementation HelloWorld 
RCT_EXPORT_MODULE(); 
RCT_EXPORT_METHOD(greeting:(NSString *)name) 


RCTLogInfo(@"Saluton, %@", name); 
} 


@end 


在 一 个 .m 文件 里 ， 你 需要 导入 相应 的 .h 文件 ， 像 第 一 行 这 样 。 我 还 导入 了 RCTLog.h, 这 
样 我 们 就 可 以 使 用 RCTLogInfo 输出 日 志 到 控制 台 。 在 导入 其 他 Objective-C 类 时 ， 我 们 总 
是 导入 头 文件 ， 而 不 是 .m 文件 。 


@implementation 和 Qend 这 两 行 表明 在 它们 之 间 的 内 容 是 HelloWorld 类 的 具体 实现 。 








剩 下 的 几 行 是 React Native 模块 主要 功能 的 实现 代码 。 通 过 RCT_EXPORT_MODULE()， 我 们 
调用 了 一 个 特殊 的 React Native 宏 ， 由 此 可 以 访问 React Native 的 桥接 。 同 样 ， 我 们 的 
greeting:name 的 方法 定义 也 以 一 个 宏 开 头 ， 它 导出 了 RCT_EXPORT_METHOD 这 一 方法 ， 因 此 
我 们 可 以 在 JavaScript 代码 中 使 用 它 。 


需要 注意 的 是 ， 这 里 Objective-C 方法 的 命名 有 一 点 奇怪 。 每 一 个 参数 名 称 都 是 被 包含 在 
这 是 React Native 的 约定 ，JavaScript BM PKA Objective-C 名 称 从 开始 
到 第 一 个 冒号 为 止 的 部 分 ， 因 此 greeting:name 就 成 了 JavaScript 里 的 greeting。 如 果 你 愿 
意 ， 可 DEH RCT_REMAP_METHOD 宏 重新 制定 命名 规则 。 























现在 ， 你 可 能 会 注意 到 ，Xcode 项 目 中 还 没有 这 些 文件 ( 见 图 7-1)。 








eae > M = XDepends 
Ee es TM Oo ==> Ve) 


v È Depends 


了 | Depends 
main.jsbundle 
hi AppDelegate.h 
m AppDelegate.m 
[3 Images.xcassets 


©) Info.plist 
>) LaunchScreen.xib 
m main.m 

= | Libraries 

pb |DependsTests 

pb | Products 











图 7-1: 导入 新 文件 之 前 的 Xcode NE 





我 们 需要 将 文件 添加 到 项 目 中 ， 以 便 将 文件 包含 在 应 用 的 构建 中 。 你 可 以 通过 在 菜单 中 选 


择 File 一 Add Files to“Depends” 来 完成 这 一 点 (ULE 7-2)。 





@ Xcode 5 





Edit View Find Navigate 









Add Files to “Depends”... 





XA 


> 











图 7-2: Xcode 中 添加 文件 的 菜单 选项 


同时 选择 HelloWorld.m 和 HelloWorld.h， 然 后 添加 到 项 目 中 ( 见 图 7-3)。 


























| Ga 3s 三 | =v ios 3 
Favorites 

B Recents 

Keybase 





Info.plist 
Mucking [fh HelloWorld.h Today, 3:25 PM 
23 Dropbox f) HelloWorld.m Today, 3:25 PM 











h AppDelegate.h 
& All My Files A Ses 
m AppDelegate.r 
> iCloud Drive > Ml Base.|proj 
A Applications > Ml Images.xcassets 
m main.m 
Œ Desktop > Ml Depends-tvos 
i Documents > [B DependsTests 
(+) Downloads á = puia 
> [B] Depends-tvOSTests 
ft bonnie 
New Folder Options 





ml a 
Date Modified ~ 
Today, 3:29 PM 


Today, 3:27 PM 
Today, 3:27 PM 


0 2:51 PM 
Today, 12:51 PM 
Today, 12:51 PM 
Today, 12:51 PM 
Today, 12:51 PM 
Today, 3:27 PM 
Today, 3:27 PM 
Today, 2:25 PM 
Today, 12:51 PM 





Cancel Add 








B 7-3; 导入 HelloWorld.m 和 HelloWorld.h 到 项 目 中 
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现在 ， 你 应 该 能 够 在 Xcode 项 目 中 看 到 这 两 个 文件 了 〈 见 图 7-4). 











© © a A Depends 
| 
v 回 Depends M 


v Depends 

[D HetloWorld.h 

m HelloWorld.m 
main.jsbundle 

h AppDelegate.h 

m AppDelegate.m 





[S] Images.xcassets 
Info.plist 


LaunchScreen.xib 


m main.m 
> Libraries 
DependsTests 
> Products 











B 7-4; 更 新 后 的 Xcode 项 目 文件 树 
导入 HelloWorld 的 文件 之 后 ， 我 们 就 可 以 在 JavaScript 文件 里 使 用 这 个 模块 了 ( 见 例 7-4)。 








例 7-4 在 JavaScript 代码 里 使 用 HelloWorld 模块 


import { NativeModules } from "react-native"; 
NativeModules.HelloWorld.greeting("Bonnie"); 




















输出 的 内 容 应 该 会 出 现在 控制 台 里 ( 见 图 7-5)， 你 可 以 同时 在 Xcode 和 Chrome 开发 者 工 
具 里 看 到 输出 内 容 ， 如 果 同 时 启用 了 它们 的 话 。 




















|= » Il Tet oO 7 Depends 


2015-08-27 09:15:21.165 Tinfo] (tid: com. facebook React. JavaScript] "Running “application " "Depends" with appParams: {"rootTag":1,"initialProps":{}}. 
__DEV__ === true, development-level warning are ON, performance optimizations are OFF 

2015-08-27 09:15:55.622 [info] [tid:com.facebook.React.JavaScript] ‘Running application "Depends" with appParams: {"rootTag":1,"initialProps":{}}. 
DEV_ === true, development-level warning are ON, performance optimizations are OFF’ 

2015-08-27 09:15:55.631 [info] [tid: com. facebook.React .HelLoWorldqueue] [HeLloWorld.m:10] Saluton, Bonnie 














| All Output $ 


日 




















图 7-5: 控制 台 输 出 ， 通 过 Xcode 界面 查看 


可 以 看 到 导入 原生 模块 的 语法 有 点 元 长 。 一 个 常用 的 办 法 是 用 JavaScript 封装 原生 模块 
( 见 例 7-5)。 


例 7-5 HelloWorld.js 一 一 用 JavaScript 封装 HelloWorld 原生 模块 


import { NativeModules } from "react-native"; 
export default NativeModules.HelloWorld; 


于 是 ， 导 入 过程 变 得 更 加 直观 了 : 


import HelloWorld from "./HelloWorld"; 
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HelloWorld.js 这 个 JavaScript 文件 也 是 一 个 添加 JavaScript 代码 到 你 的 模块 中 的 好 方法 。 


哇 ， Y: 有 些 元 长 ， 并 且 我 们 需要 操作 几 个 不 同 的 文件 。 不 过 要 祝贺 你 ， 
你 已 经 用 Objective-C 编写 了 一 个 “Hello, World” atenti | 





回顾 一 下 ， 使 一 个 Objective-C 模块 生效 ， 需 要 遵守 以 下 几 条 规则 : 





e 导入 RCTBridgeModule 头 文件 ; 
。 声明 模块 并 实现 RCTBridgeModule 协议 ; 

e 调用 RCT_EXPORT_MODULE() 安 

。 使 用 RCT_EXPORT_METHOD 宏 导 出 至 少 一 个 方法 。 























然后 原生 模块 就 可 以 使 用 iOS SDK 提供 的 任何 API T QER, MA React Native 提供 的 
A A ee 
可 以 使 用 。 值 得 一 提 的 是 ， 你 的 开发 者 账号 现在 就 会 派 上 用 场 ， 通 常 没有 开发 者 账号 就 很 
难 访问 SDK 文档 。 














既然 我 们 已 经 编写 了 自己 的 基础 “Hello, World” 模 块 ， 那 么 下 一 步 将 深入 介绍 react- 
native-video 是 如 何 工 作 的 。 


7.3.2 ”探索 react-native-video iOS 版 本 

正如 HelloWorld 模块 一 样 ，RCTVideo 也 是 一 个 原生 的 模块 ， 并 且 它 实现 了 RCTBridge-Module 
协议 。 你 可 以 在 GitHub 仓库 看 到 RCTVideo 完整 的 代码 (https://github.com/react-native- 
community/react-native-video) ， 我 们 使 用 的 是 1.0.0 版 本 。 

















react-native-video 是 一 个 由 iOS SDK 提供 的 AvPlayer API 的 基础 封装 。 我 们 再 具体 看 看 
它 是 如 何 工 作 的 ， 从 Video.ios.js 这 个 JavaScript 入 口 文 件 开 始 。 

















我 们 会 发 现 它 为 原生 组 件 提供 了 一 个 很 薄 的 封装 层 ，RCTVideo 执行 一 些 属性 的 规范 化 检 
查 ， 还 有 一 些 额外 的 谊 染 逻 辑 。 原 生 组 件 在 末尾 被 导入 : 


const RCTVideo = requireNativeComponent('RCTVideo', Video, { 
nativeOnly: { 
src: true, 
seek: true, 
fullscreen: true, 
}, 
D; 


正如 在 Helloworld 例子 中 看 到 的 一 样 ， 这 里 意味 着 RCTVideo 组 件 一 定 在 Objective-C 的 
某 处 被 导出 了 。 我 们 看 看 ios/RCTVideo.h (https://github.com/react-native-community/react- 
native-video/blob/1.0.0/ios/RCTVideo.h) : 
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// RCTVideo.h 

#import <React/RCTView.h> 

#import <AVFoundation/AVFoundation.h> 

#import "AVKit/AVKit.h" 

#import "UIView+FindUIViewController.h" 

#import "RCTVideoPlayerViewController.h" 

#import "RCTVideoPlayerViewControllerDelegate.h" 


@class RCTEventDispatcher ; 
@interface RCTVideo : UIView <RCTVideoPLlayerViewControllerDelegate> 


@property (nonatomic, copy) RCTBubblingEventBlock onVideoLoadStart; 


// …… 此 处 忽略 余下 的 属性 …… 


- (instancetype)initWithEventDispatcher: 
(RCTEventDispatcher *)eventDispatcher NS_DESIGNATED_INITIALIZER; 


- (AVPLayerViewController*)createPlayerViewController: 
(AVPLayer*)player withPLayerItem: (AVPLayerItem*)pLayerItem; 


@end 


这 一 次 ， 它 没有 继承 自 NSObject， 而 是 继承 了 UIView。 这 很 容易 理解 ， 因 为 它 泻 染 了 一 个 
视图 组 件 。 


























如 果 再 来 看 实现 的 文件 RCTVideo.m (https://github.com/react-native-community/react-native- 
video/blob/1.0.0/ios/RCTVideo.m)， 会 发 现 这 里 有 很 多 代码 。 在 实例 变量 的 顶部 ， 记 录 了 音 
量 、 播 放 速 率 和 AVPlayer 自身 等 信息 : 








- (AVPLayerViewControLler*) 
createPLlayerViewController: (AVPLayer*)pLayer 
withPLlayerItem: (AVPLayerItem*)pLayerItem 


RCTVideoPlayerViewController* playerLayer = 
[[RCTVideoPlayerViewController alloc] init]; 
playerLayer.showsPlaybackControls = NO; 
playerLayer.rctDelegate = self; 
playerLayer.view.frame = self.bounds; 
playerLayer.player = _player; 
playerLayer.view.frame = self.bounds; 
return playerLayer; 


} 
代码 里 还 有 一 些 方法 ， 比 如 计算 视频 的 长 度 、 加 载 视频 和 设置 源 及 更 多 的 功能 。 不 妨 看 一 
下 这 些 方法 ， 了 解 它们 起 了 什么 作用 。 


另 一 个 让 人 困惑 的 是 RCTVideoManager。 为 了 创建 一 个 原生 UI 组 件 而 不 仅仅 是 一 个 模块 ， 我 
们 需要 一 个 视图 管理 器 。 正 如 它 的 名 称 所 表示 的 ， 当 视图 在 处 理 一 些 泻 染 逻辑 和 类 似 的 任务 
时 ， 视 图 管理 器 就 会 处 理 其 他 的 逻辑 (事件 处 理 、 属 性 导出 等 )。 视 图 管理 器 类 至 少 需 要 : 
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。 继承 RCTViewManager 类 ， 
e 使 用 RCT_EXPORT_MODULE() #; 
。 实现 -(UIView *)view Wik, 


view 方法 需要 返回 一 个 UIView 实例 。 这 里 我 们 发 现 它 被 实例 化 并 返回 





- (UIView *)view 
{ 
return [[RCTVideo alloc] 
initWithEventDispatcher:self.bridge.eventDispatcher ]; 





RCTVideoManager 也 导出 了 一 些 属 性 和 常量 : 


#import "RCTVideoManager .h" 

#import "RCTVideo.h" 

#import <React/RCTBridge.h> 

#import <AVFoundation/AVFoundation.h> 


@implementation RCTVideoManager 
RCT_EXPORT_MODULE(); 
@synthesize bridge = _bridge; 

- (UIView *)view 


{ 
return [[RCTVideo alloc] 


initWithEventDispatcher:self.bridge.eventDispatcher ]; 


} 


- (dispatch_queue_t)methodQueue 


{ 
} 


return dispatch_get_main_queue(); 


RCT_EXPORT_VIEW_PROPERTY(src, NSDictionary); 
RCT_EXPORT_VIEW_PROPERTY(resizeMode, NSString); 
RCT_EXPORT_VIEW_PROPERTY(repeat, BOOL); 
RCT_EXPORT_VIEW_PROPERTY(paused, BOOL); 
RCT_EXPORT_VIEW_PROPERTY(muted, BOOL); 
RCT_EXPORT_VIEW_PROPERTY(controls, BOOL); 
RCT_EXPORT_VIEW_PROPERTY(volume, float); 
RCT_EXPORT_VIEW_PROPERTY(playInBackground, BOOL); 
RCT_EXPORT_VIEW_PROPERTY(playWhenInactive, BOOL); 
RCT_EXPORT_VIEW_PROPERTY(rate, float); 

/* 此 处 忽略 余下 的 RCT_EXPORT_VIEW_PROPERTY 调用 …… */ 














- (NSDictionary *)constantsToExport 
{ 
return @{ 
@"ScaleNone": AVLayerVideoGravityResizeAspect, 
@"ScaleToFiLL": AVLayerVideoGravityResize, 


了 一 个 RCTVideo; 
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Q@"ScaleAspectFit": AVLayerVideoGravityResizeAspect, 
Q@"ScaleAspectFill": AVLayerVideoGravityResizeAspectFill 
}; 
} 


@end 


RCTVideo 和 RCTVideoManager 共同 由 RCTVideo 原生 UI 组 件 组 成 ， 我 们 可 以 在 应 用 内 随意 
使 用 它 。 正 如 你 所 看 到 的 ， 利 iOS SDK 编写 原生 模块 需要 花费 一 些 工 夫 ， 但 也 不 是 不 可 
ARAJ MZAA iOS 开发 经 验 会 对 你 有 很 大 的 帮助 。iOS 开发 完整 的 介绍 目前 超出 了 本 
书 的 范围 ， 但 即使 你 没有 C 的 经 验 ， 通 过 查看 别人 的 原生 模块 ， 你 也 应 该 能 开始 
尝试 编写 自己 的 原生 模块 了 。 


7.4 Java 原生 模块 


Android 原生 模块 与 iOS 原生 模块 非常 类 似 。 你 可 以 在 官方 文档 中 找到 更 多 关于 Android 原 
生 模 块 的 相关 信息 (https://facebook.github.io/react-native/docs/native-modules-android.html) 。 














FiOS 一 样 ， 如 果 你 为 Android 安装 了 一 个 包含 原生 代码 的 模块 ， 那 么 在 将 模块 添加 到 应 
用 的 package.json 文件 之 后 ， 你 需要 运行 react-native link。 





7.4.1 编写 Android 的 Java 原 生 模 块 


为 了 更 好 地 了 解 Java 原生 模块 的 工作 原理 ， 我 们 将 自己 动手 编写 一 个 。 就 像 Objective-C 
中 那样 ， 我 们 从 简单 的 “Hello, World” 模 块 开始 。 


























REZA HelloWorld 包 创 建 一 个 目录 。 这 个 包 应 该 和 MainActivity.java 放 在 同一 目录 。 
Android SA AAA SRA Ea! 注意 ， 目 录 结 构 在 不 同 版 本 的 Android 和 React Native 
中 可 能 会 有 所 区 别 。 这 里 的 关键 点 是 ， 新 的 目录 需要 和 MainActivity.java 放 在 同一 个 目 
录 中 。 

















mkdir android/app/src/main/java/com/depends/helloworld 
现在 创建 一 个 HelloWorldModule.java 文件 ， 如 例 7-6 所 示 。 


例 7-6 helloworld/HelloWorldModule.java 


package com.depends.helloworld; 


import android.util.Log; 

import com.facebook.react.bridge.ReactContextBaseJavaModule; 
import com.facebook.react.bridge.ReactApplicationContext; 
import com.facebook.react.bridge.ReactMethod; 


public class HelloWorldModule extends ReactContextBaseJavaModule { 
public HelloWorldModule(ReactApplicationContext reactContext) { 





super (reactContext) ; 


} 


@Override 
public String getName() { 
return "HelloWorld"; 


} 


@ReactMethod 
public void greeting(String message) { 
Log.e("HelloWorldModule", "Saluton, " + message); 
} 
} 


这 里 包含 的 模板 代码 相当 多 。 让 我 们 一 步 步 来 学 习 。 
首先 ， 从 package 语句 开始 : 





package com.depends.helloworld; 








这 是 基于 文件 在 目录 中 的 位 置 而 定 的 。 


接着 导入 React Native 特定 的 文件 以 及 android.util.Log。 任 何 编写 的 模块 都 需要 导入 相同 
的 React Native 文件 。 











然后 定义 一 个 HelloWorldModule 类 。 它 是 公开 的 ， 这 意味 着 外 部 文件 可 以 使 用 它 。 而 且 ， 它 
继承 了 ReactContextBaseJavaModule， 从 而 也 继承 了 ReactContextBaseJavaModule 中 的 方法 : 


public class HelloWorldModule extends ReactContextBaseJavaModule { ... } 


这 里 实现 了 3 个 方法 : HelloWorldModule, getName 和 greeting, 


在 Java 中 ,与 类 名 名 称 相同 的 方法 称 作 构造 方法 。 因 此 ，HelloWorldModule 方法 有 点 像 模 
板 ， 我 们 只 需 调 用 super(reactContext) 方法 就 可 以 调用 ReactContextBaseJavaModule 的 构 
造 方法 ， 不 需要 额外 的 工作 。 


getName 决定 了 今后 我 们 将 在 JavaScript 里 使 用 什么 名 称 来 调用 这 个 模块 ， 因 此 需要 确保 它 是 
正确 的 ! 在 我 们 的 例子 中 ， 模 块 命名 为 HelloWorld。 注 意 ， 这 里 我 们 添加 了 一 个 eoverride 
注解 。 无 论 编写 什么 模块 ， 你 都 需要 实现 getName 方法 。 

















最 后 ，greeting 是 我 们 自己 的 方法 ， 我 们 希望 能 在 JavaScript 代码 中 调用 它 。 我 们 添加 
了 一 个 @ReactMethod 注解 ， 为 了 让 React Native 知道 这 个 方法 应 该 被 导出 。 为 了 在 调用 
greeting 方法 时 添加 日 志 ， 我 们 调用 了 Log.i， 操 作 如 下 : 











Log.i("HelloWorldModule", "Hello, " + name); 


Android 中 的 Log 对 象 提供 了 不 同 层级 的 日 志 功 能 ， 其 中 3 个 最 常用 的 功能 是 消息 (NFO), 
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警告 (WARN) 和 错误 (ERROR)， 它 们 各 自 通过 Log.i, Log.w 和 Log.e 方 法 来 调用 。 每 
个 方法 都 接收 两 个 参数 ， 一 个 是 日 志 的 标签 名 ， 另 一 个 是 日 志 信息 。 标 准 的 做 法 是 使 用 类 
名 作为 标签 名 。 你 可 以 通过 Android 文档 查看 更 多 细节 。 


我 们 还 需要 创建 一 个 包 文 件 来 包装 这 个 模块 〈 见 例 7-7) ， 这 样 我 们 可 以 将 它 加 入 构建 过 程 
中 。 访 文件 也 应 该 与 HelloWorldModule.java 文件 处 于 同 级 目录 下 。 








例 7-7 helloworld/HelloWorldPackage.java 


package com.depends.helloworld; 


import com.facebook.react.ReactPackage; 

import com.facebook.react.bridge.JavaScriptModule; 

import com.facebook.react.bridge.NativeModule; 

import com.facebook.react.bridge.ReactApplicationContext; 
import com. facebook. react.uimanager .ViewManager ; 


import java.util.ArrayList; 
import java.util.Collections; 
import java.util.List; 


public class HelloWorldPackage implements ReactPackage { 
@Override 
public List<NativeModule> 
createNativeModules(ReactApplicationContext reactContext) { 
List<NativeModule> modules = new ArrayList<>(); 
modules. add(new HelloWorldModule(reactContext) ); 
return modules; 


} 


@Override public List<ViewManager> 
createViewManagers(ReactApplicationContext reactContext) { 
return Collections.emptyList(); 

} 

} 








个 文件 基本 上 就 是 一 个 模板 。 我 们 不 需要 导入 HelloWor1d, 因 为 它们 在 同一 个 包 下 (com. 
depends .heLLoworLd) 。 这 里 有 两 个 方法 需要 注意 : createNativeModules 和 createViewManagers。 


React Native 使 用 这 些 方法 来 决定 需要 导出 哪些 模块 。 











我 们 的 原生 模块 不 需要 处 理 原生 视图 或 者 UI 元 素 ， 因 此 createViewManagers 会 返回 一 个 
ZJ, m createNativeModules 则 返回 一 个 包含 HelloWorld 实例 的 列 录 











uy 


o 





最 后 ， 我 们 需要 在 MainActivity.java 里 添加 包 。 导 入 包 文 件 : 





import com.depends.helloworld.HelloWorldPackage; 


接着 添加 HelloWorldPackage 到 getPackages() 中 : 
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protected List<ReactPackage> getPackages() { 
return Arrays.<ReactPackage>asList( 
new MainReactPackage(), 
new ReactVideoPackage(), 
new HelloWorldPackage( ) 
) ; 
} 


就 像 Objective-C 模块 一 样 ， 我 们 也 是 通过 React .NativeModules 对 象 引 入 Java 模块 的 。 现 
在 ， 我 们 可 以 在 应 用 的 任何 地 方 调用 greeting() 方法 ， 就 像 这 样 : 











import { NativeModules } from "react-native"; 
NativeModules.HelloWorld.greeting("Bonnie"); 


让 我 们 过 滤 日 志 来 查看 信息 。 在 项 目的 根 目录 下 运行 命令 
adb logcat 


要 看 到 日 志 信 息 的 输出 ， 你 需要 重启 应 用 。 





react-native run-android 


图 7-6 是 终端 中 看 到 的 输出 内 容 。 








10-11 14:01:45.081 2335 2369 I HelloWorld: Hello, Bonnie 
10-11 14:01:45.081 2335 2369 I HelloWorld: Hello, Bonnie 








7-6: logcat 的 输出 内 容 














既然 已 经 使 用 Java 编写 了 一 个 “Hello, World” 模 块 ， 那 我 们 再 看 看 react-native-video 
的 Android 版 本 实现 。 








7.4.2 ”探索 react-native-video Java 版 本 


Android 版 本 的 react-native-video 围绕 MediaPlayer API 进行 了 包装 。 它 主要 由 3 个 文件 
组 成 : 


e ReactVideoView.java 
。 ReactVideoPackage.java 


e ReactVideoViewManager.java 





ReactVideoPackage.java 文件 内 容 如 例 7-8 所 示 ， 看 起 来 和 HelloWorldPackage.java 文件 非 
常 相似 。 
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例 7-8 ReactVideoPackage.java 


package com.brentvatne.react; 


import android.app.Activity; 

import com.facebook.react.ReactPackage; 

import com.facebook.react.bridge.JavaScriptModule; 

import com.facebook.react.bridge.NativeModule; 

import com.facebook.react.bridge.ReactApplicationContext; 
import com.facebook.react.uimanager .ViewManager ; 


import java.util.Arrays; 
import java.util.Collections; 
import java.util.List; 


public class ReactVideoPackage implements ReactPackage { 


@Override 
public List<NativeModule> createNativeModules( 
ReactApplicationContext reactContext) { 
return Collections.emptyList(); 


} 


@Override 
public List<ViewManager> createViewManagers( 
ReactApplicationContext reactContext 


Jal 
return Arrays.<ViewManager>asList( 
new ReactVideoViewManager() 


); 
} 


主要 的 区 别 是 ，ReactVideoPackage 会 从 createViewManagers 返回 ReactVideoViewManager, 
而 HelloWorldPackage 会 从 createNativeModules 返回 HeLLoWorLd。 区 别 在 哪里 呢 ? 








对 Android 来 说 ， 任 何 原生 渲染 的 视图 都 是 由 ViewManager (或 者 更 具体 地 说 ， 是 扩展 了 
ViewManager 的 类 ) 来 创建 与 控制 的 。 因 为 ReactVideoView 是 一 个 UI 组 件 ， 所 以 我 们 需要 
返回 ViewManager。 在 React Native 的 文档 中 ， 有 关于 Android 原生 UI 组 件 的 信息 ， 其 中 
介绍 了 暴露 原生 模块 (例如 ， 非 泻 染 的 Java 代码 ) 和 UI 组 件 之 间 的 差异 。 














接 下 来 我 们 看 看 ReactVideoViewManager.java。 这 个 文件 比较 长 ， 你 可 以 在 react-native- 
video 项 目的 GitHub 仓库 中 看 到 完整 的 代码 (https://github.com/react-native-community/react- 
native-video/blob/1.0.0/android/src/main/java/com/brentvatne/react/ReactVideoViewManager. 


java)。 例 7-9 展示 了 一 个 缩写 的 版 本 。 





例 7-9 缩写 的 ReactVideoViewManager.java 


public class ReactVideoViewManager 
extends SimpleViewManager<ReactVideoView> { 


public static final String REACT_CLASS = "RCTVideo"; 





| 大 


第 7 章 


public static final String PROP_VOLUME = "volume"; 
public static final String PROP_SEEK = "seek"; 
/** ery ees 分 属 | it **/ 




















@Override 

public String getName() { 
return REACT_CLASS; 

} 


@Override 
protected ReactVideoView createViewInstance( 
ThemedReactContext themedReactContext 


df 
} 


return new ReactVideoView(themedReactContext) ; 


@Override 

public void onDropViewInstance(ReactVideoView view) { 
super .onDropViewInstance(view) ; 
view.cleanupMediaPLayerResources(); 


/** PAE 省 略 部 分 方法 re **/ 

















@ReactProp(name = PROP_VOLUME, defaultFloat = 1.0f) 
public void setVolume( 

final ReactVideoView videoView, 

final float volume 


df 
} 


videoView. setVoLumeModifier (volume) ; 


@ReactProp(name = PROP_SEEK) 
public void setSeek( 
final ReactVideoView videoView, 
final float seek 


df 
} 


videoView. seekTo(Math.round(seek * 1000.0f)); 
} 
这 里 有 几 点 是 需要 我 们 注意 的 。 


首先 是 getName 的 实现 。 要 注意 的 是 ， 正 如 HelloWorld 示例 那样 ， 我 们 需要 实现 getName 


方法 ， 以 便 在 JavaScript 代码 中 可 以 引用 这 个 组 件 。 





接 下 来 是 setVolume 方法 以 及 @ReactProp 装饰 符 的 使 用 。 在 这 上 





有 ， 我 们 声明 了 <Video> 组 








件 会 接收 一 个 名 为 volume 的 属性 (用 于 设置 PROP_VOLUME 的 值 ) 


， 并 且 在 属性 发 生变 化 时 ， 














setVolume 方法 会 被 调用 。 在 setVolume 中 ， 我 们 检查 了 底层 视图 是 否 存在 。 如 果 存 在 的 











话 ， 我 们 就 传递 音量 用 于 更 新 。 在 ReactVideoViewManager H , 
了 这 种 模式 。 


有 许多 方法 的 实现 都 遵循 
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最 后 ， 在 createViewInstance HH, ReactVideoViewManager 实际 上 会 使 用 正确 的 上 下 文 来 创 
建 视图 。 
































你 可 能 会 认为 ， 为 了 有 效 地 编写 原生 Android 组 件 ， 一 般 需 要 理解 Android 是 如 何 处 理 视 
图 的 。 不 过 去 看 看 其 他 的 React Native 组 件 的 实现 方式 ， 也 不 失 为 一 种 好 办 法 。 
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编写 一 个 跨 平 台 原 生 模块 是 可 能 的 吗 ? 





























答案 当然 是 “可 能 ”。 你 只 需要 分 别 为 每 一 个 平台 都 实现 一 个 模块 ， 然 后 对 外 提供 统一 的 
JavaScript API 即 可 。 这 个 方法 可 以 在 代码 复 用 最 大 化 的 前 提 下 很 好 地 解决 特定 平台 的 优化 
问题 。 














创建 一 个 跨 平台 原生 组 件 不 需要 太 多 额外 的 配置 。 一 旦 分 别 实现 了 iOS 和 Android 版 本 ， 
就 只 需要 创建 一 个 包含 index.ios.js 和 index.android.js 文件 的 目录 即 可 。 每 一 个 版 本 都 需要 
导入 正确 的 模块 。 然 后 你 就 可 以 直接 引入 这 个 目录 ，React Native 会 自动 选择 平台 对 应 的 
版 本 。 


React Native 不 强制 在 iOS 和 Android 版 本 之 间 保 持 API 的 一 致 性 ， 因 此 这 是 你 需要 考虑 
的 事情 。 如 果 你 希望 OS 和 Android 版 本 在 API 上 有 一 些 细微 的 区 别 ， 当 然 也 是 可 以 的 。 




















7.6 ”小结 


何 时 适合 使 用 原生 的 Objective-C 或 Java 代码 ? 何 时 适合 引入 第 三 方 模块 或 类 库 ? 总 体 而 
言 ， 原 生 模 块 有 3 个 使 用 场景 : 利用 现 有 的 Objective-C 或 Java 代码 ， 编 写 像 图 形 处 理 这 
样 高 性 能 或 多 线程 的 代码 ;暴露 React Native 中 未 支持 的 API, 


























对 于 现 有 的 Objective-C 或 Java 项 目 来 说 ， 编 写 原 生 模 块 是 一 个 在 React Native 中 复 用 现 有 
代码 的 很 好 的 做 法 。 混 合 型 应 用 有 些 超 出 本 书 范围 ， 但 它 确实 是 一 种 切实 可 行 的 办 法 ， 并 
且 你 可 以 使 用 原生 模块 在 JavaScript、Objective-C 和 Java 中 共享 功能 代码 。 








类 似 地 ， 对 于 一 些 注重 性 能 或 执行 特定 任务 的 场景 来 说 ， 使 用 对 应 平台 的 原生 语言 进行 开 
发 是 明智 的 做 法 。 在 这 些 场景 下 ， 让 Objective-C 或 Java 执行 一 些 繁重 的 “体力 活 ” ， 然 后 
把 结果 传 回 给 JavaScript 应 用 的 做 法 更 加 切实 可 行 。 

















最 终 ， 你 难免 会 遇 到 需要 使 用 但 React Native 尚未 支持 的 平台 API。 这 种 情况 下 ， 你 有 两 
种 解决 方案 : 一 种 是 转向 社区 ， 寻 找 是 否 有 人 已 经 解决 了 你 的 问题 ， 另 一 种 则 是 自己 来 解 
决 ， 顺 利 解决 了 之 后 还 可 以 把 方案 贡献 给 社区 ! 能 够 自己 编写 原生 模块 ， 意 味 着 你 不 需要 
依赖 React Native 核心 团队 就 可 以 利用 宿主 平台 了 。 
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即使 你 之 前 没有 原生 iOS BK Android 的 开发 经 验 ， 如 果 你 计划 使 用 React Native 进行 开 
发 ， 尝 试 阅读 Objective-C 或 Java 代码 是 一 个 不 错 的 主意 。 自 己 动手 尝试 并 解决 问题 的 
能 力 是 无 价 的 ， 日 后 在 使 用 React Native 时 万 一 遇 到 困难 也 不 会 手足 无 措 。 不 用 担心 ， 
去 试 试 吧 ! 














当 你 开发 自己 的 React Native 应 用 时 ，React Native 社区 以 及 JavaScript 完善 的 生态 环境 会 











给 你 提供 





宝贵 的 资源 。 你 可 以 在 别人 的 模块 的 基础 上 进行 开发 ， 如 果 需 要 帮助 的 话 ， 不 妨 





联系 他 们 吧 ! 





模块 和 原生 代码 | 117 


第 8 和 章 


平台 特定 代码 





在 第 7 章 中 ， 我 们 研究 了 如 何 使 用 Java 和 Objective-C 单独 实现 原生 模块 的 编写 。 这 样 会 
引发 一 些 问题 : 所 有 的 React Native 组 件 都 包括 在 iOS 和 Android 上 的 实现 吗 ? 它们 有 义 
务 这 样 做 吗 ? 如 何在 自己 的 代码 中 处 理 特定 平台 的 实现 ? 








不 是 所 有 的 组 件 都 在 全 平台 可 用 ， 也 不 是 所 有 的 交互 模式 都 适用 于 全 部 的 设备 。 但 这 不 意 
味 着 你 不 能 在 应 用 中 使 用 平台 特定 的 代码 。 在 本 章 中 ， 我 们 会 介绍 平台 特定 的 接口 与 实 
现 ， 以 及 如 何 将 平台 特定 的 组 件 合并 到 跨 平 台 应 用 中 的 策略 。 














在 React Native 中 ， 编 写 跨 平台 代码 并 不 是 一 件 非 黑 即 白 的 事情 。 你 可 以 将 
跨 平台 代码 和 平台 特定 的 代码 混合 在 应 用 中 ， 本 章 正 打 算 这 么 做 。 














8.1 仅 iOS/ 仅 Android 可 用 的 组 件 


某 些 组 件 只 能 在 特定 平台 可 用 ， 其 中 包括 <TabBarI0S> 或 者 <ToolbarAndroid>。 因 为 包含 
某 种 特定 平台 的 底层 API， 所 以 它们 是 特定 于 平台 使 用 的 。 例 如 ，<ToolbarAndroid> 组 件 
暴露 了 一 个 Android 特定 的 API， 这 种 视图 类 型 在 OS 上 是 不 存在 的 。 




















平台 特定 的 组 件 会 以 适当 的 后 缀 命名 : BAG 105， 要 么 是 Android。 如 果 你 试图 在 错误 的 
平台 上 进行 引入 ， 那 么 应 用 就 会 骨 泪 。 组 件 还 可 以 具有 平台 特定 的 属性 。 在 文档 中 ， 这 些 
属性 会 通过 一 个 小 徽章 标记 出 来 ， 用 来 表示 它们 的 用 法 。 例 如 ，<TextInput> 组 件 的 属性 
有 一 些 是 平台 无 关 的 ， 而 另 一 些 则 是 iOS 或 者 Android 特定 的 (ILE 8-1). 
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ios maxLength number 


Limits the maximum number of characters that can be entered. Use this instead of 
implementing the logic in JS to avoid flicker. 


android numberOfLines number 


Sets the number of lines for a Textlnput. Use it with multiline set to true to be able to fill 
the lines. 











8-1; <TextInput> 包含 了 Android 和 iOS 专用 的 属性 


8.2 平台 特定 组 件 的 实现 








那么 ， 在 跨 平台 应 用 中 ， 如 何 处 理 平 台 特 定 的 组 件 或 者 属性 呢 ? 好 消息 是 ， 你 可 以 继续 使 
用 这 些 组 件 。 将 它们 包含 在 具有 平台 特定 实现 的 组 件 里 ， 你 就 可 以 为 应 用 在 相应 的 平台 上 
演 染 适当 的 内 容 。 


平台 特定 的 组 件 只 能 在 特定 平台 上 工作 。 例 如 ，<ToolbarAndroid> 就 只 能 
在 Android 上 使 用 。 带 有 平台 特定 实现 的 组 件 ， 则 可 能 是 支持 跨 平台 工作 的 ， 
但 是 在 不 同 的 平台 上 可 能 有 不 同 的 实现 和 行为 。 








一 种 很 常见 的 做 法 是 ， 父 组 件 “ 封 装 ” 特 定 于 平台 的 行为 ， 并 提供 统一 的 API。 对 于 诸如 导 
航 UI 之 类 的 元 素 ， 这 是 非常 有 意义 的 ， 因 为 i0S 和 Android 平台 上 的 交互 模式 区 别 很 大 。 


在 本 市 中 ， 我 们 将 讨论 如 何在 组 件 中 实现 平台 特定 的 行为 。 


8.2.1 使 用 平台 特定 的 文件 扩展 名 


还 记得 React Native 应 用 是 如 何 同时 使 用 index.ios.js 和 index.android.js 文件 进行 初始 化 的 
吗 ? 这 个 命名 约定 可 以 适用 于 任何 文件 ， 用 来 创建 在 Android 和 iOS 上 有 着 不 同 实现 的 














例 8-1 中 演示 了 一 个 显示 弹出 消息 的 简单 组 件 的 Android 版 本 实现 。 





例 8-1 Newsflash.android.js 


import React from "react"; 
import { StyleSheet, Text, View, Alert } from "react-native"; 


export default class App extends React.Component { 
componentDidMount() { 
Alert.alert("Hey!", "You're on Android."); 
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} 


render() { 
return ( 
<View style={styles.container}> 
<Text> 
What? I didn't say anything. 
</Text> 
</View> 
)3 
} 
} 


const styles = StyleSheet.create({ 
container: { 
flex: 1, 
backgroundColor: "#fff", 
alignItems: "center", 
justifyContent: "center" 
} 
); 


例 8-2 则 是 该 组 件 的 iOS 版 本 实现 。 


例 8-2 Newsflash.ios.js 


import React from "react"; 
import { StyleSheet, Text, View, Alert } from "react-native"; 


export default class App extends React.Component { 
componentDidMount() { 
Alert.alert("Hey!", "You're on i0S."); 


} 


render() { 
return ( 
<View style={styles.container}> 
<Text> 
What? I didn't say anything. 
</Text> 
</View> 
); 
} 
} 


const styles = StyleSheet.create({ 
container: { 
flex: 1, 
backgroundColor: "#fff", 
alignItems: "center", 
justifyContent: "center" 
} 
]); 





例 8-2 看 起 来 和 例 8-1 几乎 是 相同 的 ， 并 且 它们 也 实现 了 相同 的 API。 这 些 文件 需要 位 于 
同一 个 目录 中 。 
要 导入 这 个 组 件 ， 我 们 可 以 这 样 做 : 

import Newsflash from "./Newsflash"; 


要 注意 这 里 我 们 省 略 了 文件 扩展 名 。React Native 打包 器 会 根据 匹配 的 平台 查找 合适 的 文 
件 扩展 名 。 在 iOS 中 ， 它 会 加 载 Newsflash.ios.js ( 见 图 8-2)， 而 在 Android 中 则 会 加 载 


Newsfash.android.js。 





这 样 ， 我 们 就 拥有 了 一 个 跨 平 台 的 组 件 。 它 同时 兼容 iOS 和 Android， 但 是 会 根据 不 同 的 
平台 浑 染 不 同 的 内 容 。 





Hey! 


You're on iOS. 


OK 














B 8-2: iOS 上 的 Newsflash 组 件 
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8.2.2 ”使 用 平台 模块 
编写 平台 特定 代码 的 另 一 种 选择 是 使 用 Platform 模块 。 这 个 API 提供 了 应 用 正在 运行 的 操 
作 系 统 和 版 本 相关 信息 。 





import { Platform } from "react-native"; 


console. log("What OS am I using?"); 
console. lLog(Platform.0S) ; 


console. log("What version of the 0S?"); 
console. log(Platform.Version); // fila, Android Nougat 系 统 的 版 本 号 是 25 











如 果 你 希望 根据 平台 调整 一 些 元 素 ， 但 是 又 不 想 编写 完全 独立 的 组 件 实现 ， 那 么 Platform 
API 就 会 很 有 用 。 一 种 常见 的 用 途 就 是 样式 表 ， 例 如 ， 你 需要 在 不 同 平 台 上 显示 不 同 的 颜 
色 方 案 。 





import { Platform, StyleSheet } from "react-native"; 
const styles = StyleSheet.create({ 


color: (Platform.OS === "ios") ? "#FF6666" : "#DD4444", 
}); 


8.3 何 时 使 用 平台 特定 组 件 


何 时 适合 使 用 平台 特定 组 件 呢 ? 在 大 多 数 情况 下 ， 当 你 希望 应 用 遵循 平台 特定 的 交互 模式 
时 ， 你 可 以 考虑 使 用 它 。 如 果 你 想 让 应 用 拥有 真正 “原生 ”的 体验 ， 那 么 就 值得 关注 平台 
特定 的 UI 规范 。 


Apple 和 Google 公司 都 为 它们 的 平台 提供 了 人 机 界面 指南 ， 以 下 资料 值得 参考 : 





























。 iOS 人 机 接口 指南 (https://developer.apple.com/design/human-interface-guidelines/ios/overview/ 
themes/) 
e Android 设计 参考 (https://developer.android.com/design/) 


通过 只 创建 特定 组 件 的 平台 特定 版 本 ， 你 就 可 以 在 代码 重用 和 基于 平台 的 定制 之 间 取 得 平 
衡 。 在 大 多 数 情况 下 ， 要 同时 支持 iOS 和 Android， 你 只 需要 对 少量 组 件 进行 单独 实现 即 可 。 




















BIS 


调试 与 开 友 者 工具 





当 你 开发 自己 的 应 用 时 ， 可 能 会 遇 到 一 些 问 题 。 当 需要 调试 应 用 的 时 候 ， 我 们 庆幸 地 发 
现 已 经 有 一 些 React Native 的 专用 工具 了 ， 它 们 可 以 帮助 我 们 更 轻松 地 完成 工作 。React 
Native 和 宿主 平台 的 交互 层 可 能 会 出 现 一 些 糟糕 的 bug， 本 章 也 会 介绍 这 部 分 内 容 。 我 们 
还 将 了 解 React Native 开发 中 一 些 和 常见 的 陷阱 ， 以 及 一 些 用 来 解决 这 些 问 题 的 工具 。 不 涉 
及 测试 内 容 的 调试 讲解 都 是 不 完整 的 ， 因 此 我 们 也 会 介绍 一 些 React Native 代码 自动 化 测 
试 的 内 容 。 


9.1 JavaScript 调 试 实践 和 解释 


当 使 用 Web 平台 上 的 React 时 ， 我 们 拥有 大 量 基于 JavaScript 的 通用 的 技术 和 工具 来 帮 
助 我 们 调试 应 用 。 它 们 中 的 大 多 数 也 适用 于 React Native， 但 有 时 需要 一 些微 小 的 改动 。 
React Native 允许 我 们 使 用 熟悉 的 控制 台 、 调 试 器 和 React 开发 者 工具 ， 因 此 调试 React 
Native 中 的 JavaScript 问题 应 该 会 让 你 感觉 很 熟悉 。 














9.1.1 激活 开发 者 选项 

为 了 使 用 这 些 工具 ， 你 需要 在 应 用 内 的 开发 者 菜单 中 启用 Chrome 开发 者 工具 ( 见 图 9-1). 
你 可 以 通过 摇晃 设备 来 触发 这 个 莱 单 。 在 iOS 模拟 器 中 ， 可 以 通过 快捷 键 Command+D 
来 触发 ， 在 Android 模拟 器 中 ， 可 以 通过 Command+M (Mac 平 台 ) 或 者 Control+M 
(Windows 平台 ) 来 触发 。 你 可 以 在 菜单 中 选择 Debug in Chrome 来 启动 Chrome 开发 者 
工具 。 
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e 5554:galaxy 





Reload JS 


Debug in Chrome 


Dev Settings 


Debug in Chrome 


Inspect Element 


Debug in Safari 


Show FPS Monitor 


Inspect Element 


Cancel 














图 9-1: 应 用 内 置 的 开发 者 菜单 ，Android (Æ) 和 iOS (5) MA 
要 注意 的 是 ， 开 发 者 菜单 在 生产 版 本 中 是 禁用 的 。 





如 果 你 用 的 是 Expo 应 用 (即使 用 Create React Native App 创建 的 应 用 )， 可 以 使 用 相同 的 
快捷 方式 来 打开 Expo 开发 者 菜单 (JILA 9-2)。 

















e0000 AT&T = 11:10 AM 人 @ © 97% a 
人 crossplatform x 
e crna 
O Refresh 
器 Copy Link 


A Go to Expo Home 


Disable Live Reload 

Reload 

Toggle Element Inspector 
Start Systrace 

Hot Reloading Unavailable @ 
Show Perf Monitor 


Debug Remote JS 











9-2; Expo 开发 者 菜单 





9.1.2 ”使 用 console.1log 调 试 


最 基础 也 是 最 常用 的 调试 方法 之 一 就 是 先 输 出 ， 然 后 观察 发 生 了 什么 。 对 于 大 多 数 Web 开 
发 者 而 言 ， 在 代码 中 添加 console. log 是 工作 流程 中 的 一 个 潜在 环节 。 











JavaScript 控制 台 直 接 在 React Native 之 外 工作 。 使 用 输出 语句 不 需要 任何 特殊 的 配置 。 


使 用 Xcode 时 ， 你 会 看 到 与 Xcode 控制 台 相 同 的 输出 内 容 (LE 9-3)。 注 意 ， 你 可 以 通过 
调整 Xcode 可 视 面板 来 扩大 控制 台 的 空间 。 




















@ Xcode File Edit View Find Navigate Editor Product Debug Source Control Window Help 











ene > sk...) iPhone Running crna on iPhone 100 Bs = @ 




















8 
an 
i] 





B < È crna crna ) Im main.m ) No Selection <A> 
/** 


* Copyright (c) 2015-present, Facebook, Inc. 
All rights reserved. 


LICENSE file in the root directory of this source tree. An additional grant 
of patent riahts can be found in the PATENTS file in the same directorv. 
= æ [l hod crna 


2017-09-22 16:03:50.826 [info][tid: 
2017-09-22 16:06:13.023 [info][tid 


* 
* 
* This source code is licensed under the BSD-style license found in the 
* 
* 






















m. facebook.react.JavaScript] I'm a console statement! 
m. facebook.react.JavaScript] I'm a console statement! 
2017-89-22 16: +472 [info] [t m. facebook.react.JavaScript] I'm a console statement! 
2017-09-22 16:06:35.153 [info][tid:com.facebook.react.JavaScript] I'm a console statement! 
2017-89-22 16:06:35.893 [info][tid:com. facebook.react.JavaScript] I'm a console statement! 


Target Output © © console o lna 














E 9-3: Xcode 中 的 控制 台 输出 





与 此 相似 ， 对 于 Android 而 言 ， 你 可 以 在 项 目 根 目录 运行 Logcat 命令 来 查看 设备 的 日 志 
( 见 图 9-4), 


adb Logcat 





10-11 20:12: j: 139 2070 2085 E Surface : getSlotFromBufferLocked: unknown buffer: 0xab751700 
: 1301 W App0ps : Finishing op nesting under-run: uid 10058 pkg com.androiddepends code 24 time=0 duration=0 nesting=0 
ie 2104 W ReactNativeJS: 'Warning: Native component for "RCTModalHostView" does not exist 
10-11 20:12:10.528 2070 2104 D ReactNativeJS: ‘Running application "AndroidDepends" with appParams: {"initialProps":{},"rootTag":1}. __DEV__ === true, devel 
opment-level warning are ON, performance optimizations are OFF' 
10-11 20:12:10.529 1282 1293 W InputMethodManagerService: Window already focused, ignoring focus gain of: com.android. internal. view. IInputMethodClient$Stub$ 
Proxy@c707531 attribute=null, token = android. os.BinderProxy@el4az8e 
10-11 20:12:10.542 2070 2104 D ReactNativeJS: ‘CONSOLE.LOG IN LOGCAT' 














B 9-4; logcat 中 标签 名 为 ReactNativeJS 的 控制 台 输出 





然而 这 些 视图 杂乱 无 章 ， 还 夹杂 着 一 些 平台 相关 的 内 容 。 由 于 控制 台 输 出 是 带 有 
ReactNativeJs 标签 的 ， 我 们 可 以 运行 这 条 命令 作为 替代 : 


adb Logcat | grep ReactNativeJS 
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我 们 可 以 直接 使 用 基于 浏览 器 的 开发 者 工具 ， 从 而 获得 更 加 熟悉 和 清 来 的 体验 。 激 活 开发 
者 菜单 并 选择 Debug Remote JS， 然 后 打开 你 的 控制 台 。 如 图 9-5 所 示 ， 你 可 以 从 Chrome 
开发 者 工具 的 控制 台中 看 到 输出 的 内 容 。 




















eso React Native Debugger x Personal 


le localhost:8081/debugger-ui iy DZ 图 电 三 
=o Apps asciidoc y affixes Non 2015 Bonnie E IE Evildea - YouTube 


React Native JS code runs inside this Chrome tab 
Press to open Developer Tools. Enable Pause On Caught Exceptions for a better debugging experience. 


Status: Debugger session #10010 active 


Q (| Elements Network Sources Timeline Profiles Resources Audits | Console | React > % Ox 
© Y <top frame> v DP 





Running application "Zebro" with appParams: {"rootTag":1,"initialProps":{}}. _DEV_ === true, developnent-level warning are ON, performance optimizations are OFF index,ios,bundle:44410 
©1'ma console statement! index. ios bundle: 1504 














9-5; Chrome 控制 台 输 出 
注意 ， 你 需要 先 打 开 控 制 台 才 可 以 看 到 输出 内 容 。 


这 个 功能 是 怎样 工作 的 呢 ? 当 你 加 载 了 开局 远程 JavaScript 调试 工具 的 React Native 应 用 
Zia, tl bt ae (iit React Native 包 管 理 器 使 用 一 个 标准 的 <script> 标签 来 执行 相同 的 
JavaScript 代码 ， 于 是 你 就 有 了 一 个 基于 训 览 器 的 调试 器 。 随 后 ， 包 管理 器 使 用 WebSocket 
进行 设备 与 浏览 器 之 间 的 通信 。 


我 们 不 需要 过 多 关注 具体 的 细节 ， 只 需要 知道 如 何 使 用 这 些 工 具 就行 了 ! 














除了 console.log 之 外 ， 你 还 可 以 利用 console.warn 或 者 console.error。 在 开发 版 本 构建 
HH, console.warn 会 在 应 用 底部 显示 黄色 消息 框 ， 而 console.error 的 消息 则 会 通过 全 屏 
红色 显示 。 在 生产 版 本 构建 中 ， 这 些 视觉 指示 会 被 禁用 ， 因 此 你 不 用 担心 它们 会 显示 给 终 
端 用 户 。 


9.1.3 使 用 JavaScript 调 试 器 

你 也 可 以 使 用 JavaScript 调试 器 ， 就 像 在 开发 Web 平台 上 的 React 一 样 。 在 Chrome 浏览 器 
中 打开 开发 者 工具 ， 切 换 至 source 选项 ， 然 后 调试 器 会 在 断 点 处 被 激活 。 你 可 以 在 图 9-6 
中 查看 这 些 步骤 。 





























eeoj L React Native Debugger x ea 


| Personal | 











5 > CŒ [Ì localhost:8081/debugger-ui 
iil Apps | asciidoc yy affixes | !Con 2015 BonnieE 加 Evildea - YouTube 








Paused in debugger I> AN 


a Elements Network | Sources | Timeline Profiles Resources Audits Console React 


Sources Content scripts Snippets | [F] debugger-ui 。 CardsStorejs 。 DeckCreationjs indexjs ReviewStorejs index.iosjs x 
» © (no domain) 46 H: 
Y © localhost:8081 a 
* Users/bonnie/Irn-code/Zebro| 49 goHome() { . 
国 RunMainModulejs 到 De ran, opToTeo i 
(3 debugger-ui 


= 53 _renderScene(route) { 
la] index.ios.bundle 54 ~ switch (route.name) { 
55| case 'decks' 


56| return <Decks review=(this. review} 


ARO: 


> %0 x 
at? 
Caught 
> Watch+ © 
Y Call Stack 
index.ios.js:74 
breto_rend 

er 


mponentjs:715 











return 
76 ‘<View style={styles.container}> 








ReactComposi 
57| createddeck={this.createdDeck}/>; teComponent 
38 | case Kirar Mixin._render 
59| returt 

60) rTeviews(this. review) ValidatedCom 
61| quitetthis. goHome} ponentWithou 
62| nextcarde{this,createsDeck> tOwnerOrCont 
63) {,.. route. data ext 

64 case ‘review a 
65| retur m devie quite(this.gotione} ss- route. dataj; mponent,js:737 
66| jefau ReactComposi 
67| seta error( 'Encountered unexpected route: ' + route.name); teComponent 
68, Mixin._render 
69| return <Decks/>; ValidatedCom 
a ponent 

72 render() { ReactPerf,js:70 
73 __ console. log("I'n a console statenent!"); ReactComposi 
74 teComponent 
5 —renderValid 


Tad amnana 





图 9-6: 使 用 调试 器 
值得 一 提 的 是 ， 类 似 于 JavaScript 控制 台 ， 


如 果 没 有 预先 打开 开发 者 工具 面板 ， 那 么 调试 


器 可 能 不 会 在 断 点 处 被 激活 。 同 样 ， 如 果 没 有 启用 远程 JavaScript 调试 功能 ， 那 么 调试 器 


也 不 会 被 激活 。 


使 用 调试 器 ， 你 就 可 以 直接 在 Chrome 上 查看 跟 平 时 一 样 形式 的 源 代码 。 同 时 ， 也 可 以 使 


浏览 器 内 置 的 控制 台 与 当前 的 JavaScript 上 下 文 进行 交互 。 


9.1.4 使 用 React 开 发 者 工具 


FÈ Web 平台 上 的 React ht, React 开发 者 工具 是 非常 实用 的 。 它 允许 你 审查 组 件 的 层次 
结构 ， 以 及 检查 组 件 状态 和 属性 ， 还 可 以 直接 在 浏览 器 中 修改 状态 。React 开发 者 工具 可 


以 在 Chrome 扩展 中 心里 找到 。 


React 开发 者 工具 也 可 以 配合 React Native 使 用 。 在 使 用 之 前 ， 你 需要 先 安装 它 的 独立 版 本 : 


npm install -g react-devtools 


然后 通过 以 下 命令 ， 运 行 开发 者 工具 ， 如 图 9-7 所 示 。 


react-devtools 
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Carrier > 


eae React Developer Tools 
© C Highight Updates Highlight Search 


v 


What? I didn't say anything. 


AppContainer View RCTView View RCTView ExponentRootComponent AwakelnDevApp 





View RCTView App View RCTView Tox Boore 














B 9-7: Reat 开发 者 工具 


9.2 React Native 调 试 工具 


除了 基于 JavaScript 的 Web 基础 调试 工具 之 外 ， 还 有 一 些 调试 功能 是 针对 React Native 的 。 


9.2.1 使 用 审查 元 素 功 能 

CED ae EEH React 开发 者 工具 时 ， 你 会 发 现 “ 审 查 元 素 ” 功 能 还 有 一 些 待 改进 的 地 方 。 
不 过 应 用 内 的 “审查 元 素 ” 的 功能 可 能 会 对 你 有 所 帮助 ， 它 支持 查看 样式 等 信息 ， 还 为 你 
提供 了 一 种 快捷 的 挖掘 组 件 层级 的 功能 。 如 图 9-8 所 示 ， 你 可 以 查看 按钮 组 件 的 审查 结果 。 






































Carrier > 9:05 AM = 


@ ZEBRETO 


die Frau 


Stop Reviewing 


olo (10, 162) 


355 x 53 


ndColor: #FFFFFF olo 
0 


0 





Inspect Perf 











89-8: 使 用 审查 元 素 功能 ， 点 击 组 件 查看 更 多 信息 
这 个 视图 同时 也 展示 了 一 些 基本 的 性 能 指标 。 


9.2.2 AWAR 

在 应 用 开发 过 程 中 最 常见 的 场景 之 一 就 是 宕 机 红 屏 了 。 错 误 界 面 虽然 让 人 惊慌 ， 但 实际 上 
是 非常 好 用 的 : 它 捕获 错误 并 解析 成 有 意义 的 信息 。 因 此 ， 学 会 理解 它 显 示 的 错误 信息 也 
有 助 于 提高 开发 效率 。 


例如 ， 一 个 语法 错误 会 输出 如 图 9-9 所 示 的 信息 ， 它 指出 了 错误 所 在 的 文件 和 行 号 。 
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SyntaxError /Users/bonnie/Irn-code/Zebro/ 
src/components/NormalText.js: Unexpected 
token (17:2) 


/Users/bonnie/ tr 
components/Norma 














9-9: 语法 错误 的 宕 机 红 屏 


另 一 个 常见 的 错误 是 尝试 使 用 一 个 未 导入 或 未 定义 的 变量 。 
组 件 ， 像 这 样 : 


import React, { Component } from "react"; 


export default class App extends Component { 
render() { 
return ( 
<View> 
<Text> 
I haven't imported things properly! 
</Text> 
</View> 
); 
} 
} 


这 会 引发 如 图 9-10 所 示 的 错误 信息 。 


例如 ， 没 有 显 式 地 导入 <Text> 








You are trying to render the global Text 
variable as a React element. You probably 
forgot to require Text. 


getInvalidGlobalUseError 
aultProps 
createElement 


createElement 


Norma lText_render 


_renderValidatedCompo tWithoutOwnerOrC 
ontext 


mponent 


ReactCompositeComponent__renderValidated 
Component 


mountComponent 


ReactCompositeComponent_mountComponent 














S 9-10: 忘记 导入 <Text> 组 件 而 引发 的 错误 
尝试 使 用 一 个 未 定义 的 变量 也 会 引发 错误 ( 见 图 9-11)。 





Can't find variable: View 


Zebreto_render 


renderValidatedComponentWithoutOwner0rc 
text 


_renderValidatedComponent 


ReactCompositeComponent__renderValida 
Component 


mountComponent 


ReactCompositeComponent_mountComponent 


mountChildren 


initializeChildren 


mountComponent 


mountComponent 














图 9-11: 尝试 使 用 未 定义 的 变量 的 错误 信息 
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样式 相关 的 错误 有 一 些 特定 的 信息 。 举 例 而 言 ， 如 果 调 用 StyleSheet.create 方法 并 传人 
了 一 个 无 效 的 值 ， 那 么 React Native 会 告诉 你 哪些 值 才 是 有 效 的 〈 见 图 9-12) 。 

















Invariant Violation: Invalid prop ‘fontWeight of 
value ‘oops’ supplied to “StyleSheet normal, 
expected one of 
["normal","bold","100","200","300","400","500 
","600","700","800","900"). 
StyleSheet normal: { 
"fontSize": 24, 
"fontFamily": "Avenir Medium", 
“fontWeight": "oops" 
} 


styleError 
J bor 


validateStyleProp 
J 0 c Z 


validateStyle 
jJ 

create 
j or 


<unknown> 
j bonnie 














9-12: 误 设 样式 属性 的 错误 信息 


和 宕 机 红 屏 看 起 来 可 能 有 点 吓人 ， 但 确实 对 你 有 所 帮助 ， 并 且 它 展示 的 错误 信息 都 是 很 有 
用 的 。 如 果 由 于 某 些 原因 需要 退出 错误 界面 ， 只 需要 在 模拟 器 上 按 下 “退出 键 ”(Escape 
key) 就 可 以 切换 回应 用 界面 了 。 





9.3 JavaScript 之 外 的 调试 方法 

由 于 使 用 React Native 编写 移动 应 用 ， 你 遇 到 的 错误 可 能 不 仅仅 存在 于 React 代码 里 ， 还 
可 能 出 现在 应 用 内 部 。 如 果 你 是 移动 开发 的 新 手 ， 那 么 这 些 问题 可 能 会 让 人 诅 均 。 此 外 ， 
有 时 候 你 会 遇 到 一 些 因 JavaScript 代码 与 宿主 平台 交互 而 产生 的 错综复杂 的 问题 和 错误 ， 
而 React Native 和 宿主 平台 代码 的 混合 会 产生 一 些 莫名 其 妙 的 “症状 ”。 











学 习 调 试 纯 JavaScript 代码 之 外 的 问题 对 使 用 React Native 进行 高 效率 开发 来 说 是 非常 重要 
的 。 值 得 庆幸 的 是 ， 很 多 问题 都 比 想象 中 容易 解决 ， 而 且 还 有 大 量 的 工具 可 以 帮助 我 们 。 





9.3.1 常见 的 开发 环境 问题 
同时 管理 你 的 iOS、Android 和 JavaScript 开发 环境 可 能 会 有 点 令 人 忻 恼 ， 并 且 遇 到 上 述 任 





何 问题 的 组 合 都 不 足 为 奇 。 


如 果 你 过 到 由 于 包 管 理 器 的 启动 ， 或 者 由 于 使 用 npm start 或 react-native run-android 
构建 或 运行 应 用 而 产生 的 错误 ， 那 么 很 可 能 是 依赖 的 问题 。 





如 果 你 的 依赖 出 现 问题 ， 一 种 常用 的 解决 办 法 是 清理 所 有 已 安装 的 npm 包 ， 然 后 重 ; 
安装 : 


Ee 





rm -rf node_modules 
npm install 


9.3.2 ”常见 的 Xcode 问题 


当 你 构建 OS 应 用 时 ， 可 能 会 遇 到 一 些 错误 ， 它 们 会 出 现在 Xcode 的 问题 面板 里 (ILE 9-13)。 
你 可 以 通过 选择 警告 图 标 来 查看 错误 。 





























@ Xcode File Edit View Find Navigate 





r 


©0990 > Hs @ Zebro) Wå iPhone 
Fale ee OU NO SE ee G 
By File By Type Show the Issue navigator 











9-13: 查看 错误 面板 





接着 ，Xcode 会 为 你 指出 相关 的 文件 和 行 号 ， 在 IDE 里 高 亮 显示 这 些 问 题 。 图 9-14 展示 了 
一 个 常见 错误 的 例子 。 

















// jsCodeLocation = [[NSBundte mainBundle] URLForResource:@"main" withExtension:@"jsbundle"] ; 

o RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation 
moduleName:@"Zebro" | @) No visible @interface for 'RCTRootView' declares the selector ‘initWithBundleURL:moduleName:launchOptions: 

launchOptions: launchOptions]; 











B 9-14: 接口 错误 


No visible interface for “RCTRootView” ih PH React Native 的 类 由 于 某 些 原因 对 Xcode 来 
说 是 不 可 见 的 。 通 和 常 ， 如 果 你 在 Xcode 里 磁 到 Xis undefined ix FEMA, FFA XE 
RCT 为 前 级 或 是 React Native 的 一 部 分 文件 ， 那 么 建议 你 按 如 下 步骤 检查 包 管理 器 ， 确 保 
JavaScript 的 依赖 处 于 良好 状态 中 : 


(1) 退出 包 管理 器 ， 

(2) 退出 Xcode; 

(3) 在 项 目 目录 下 运行 npm install; 
(4) 重新 打开 Xcode。 
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男 一 个 常见 的 问题 是 资源 尺寸 的 问题 (如 图 9-15 所 示 )。 











@ Xcode File Edit View Find Navigate 
eee > E = @ Zebro) Wi iPhone 

al Fi Co, @ eS el 
By Type 


Zebreto 
Ms @ 1 issue 





v | Images.xcassets 
ñ, Asset Catalog Compiler Warning 
LaunchImage.launchimage/zebro_splash@2x-5.png is 
750x1334 but should be 2208x1242. 











B 9-15: 有 关 图 像 尺寸 问题 的 警告 


资源 文件 需要 符合 目标 平台 的 尺寸 要 求 (尤其 是 应 用 的 图 标 文 件 )， 如 果 你 导入 了 一 个 错 
误 的 尺寸 ， 那 么 Xcode 将 会 抛 出 一 个 警告 。 
































BESET Xcode 的 警告 可 能 需要 一 些 时 间 ， 尤 其 当 你 对 Objective-C 不 熟悉 时 。 其 中 最 环 手 
的 是 关于 React Native 与 Xcode 项 目 整合 的 问题 ， 但 通过 清理 并 重新 安装 React Native iÑ 
常 就 能 够 解决 。 











9.3.3 ”常见 的 Android 问 题 

当 你 运行 react-native run-androtd 时 ， 可 能 会 出 现 一 些 错误 ， 阻 止 你 加 载 应 用 。 最 常见 
的 两 个 问题 是 Android 依赖 的 丢失 以 及 未 能 启动 Android 虚拟 设备 (或 通过 USB 连接 的 可 
识别 的 设备 ) 。 


如 果 你 遇 到 一 个 关于 包 丢 失 的 警告 ， 可 通过 运行 android 来 查看 该 包 是 否 被 列 为 “已 安 
装 ”。 如 果 没 有 的 话 ， 那 就 安装 它 。 如 果 已 经 安装 了 ， 但 React Native 无 法 找到 的 话 ， 那 
么 可 以 按照 上 面 的 步 又 尝试 修复 开发 环境 问题 。 同 时 ， 你 也 应 该 检查 一 下 ， 确 保 ANDROID 
HOME 环境 变量 已 经 被 正确 设置 并 指向 了 Android SDK 的 安装 目录 。 例 如 ， 在 我 的 系统 上 是 
这 样 的 : 





















































$ echo $ANDROID_HOME 
/usr/local/opt/android-sdk 











如 果 你 遇 到 一 个 关于 指定 了 不 可 识别 设备 作为 构建 目标 的 问题 ， 那 就 需要 检查 你 的 设备 。 
你 是 打算 在 模拟 器 上 运行 应 用 吗 ? 如 果 模 拟 器 仍 处 在 启动 过 程 ， 那 么 react-native run- 
android 命令 会 执行 失败 ， 可 以 等 待 儿 分 钟 再 重 试 。 如 果 你 打算 使 用 物理 设备 ， 请 确保 
USB 调试 选项 已 被 激活 。 
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创建 签名 版 本 的 Android 应 用 之 后 ， 可 能 还 会 遇 到 一 些 问题 : 
$./gradlew installRelease 


INSTALL_PARSE_FAILED_INCONSISTENT_CERTIFICATES : 
New package has a different signature 


PAR AT LA GB Ih Ee i CEA ce EER RAS DF AR PN, LT A IRR. X 
个 问题 是 因 尝 试 使 用 一 个 不 同 的 签名 密 钥 来 安装 应 用 而 导致 的 。 这 当然 会 在 你 生成 第 一 个 
签名 版 APK 之 后 发 生 。 

















9.3.4 React Native 包 管理 器 


React Native 依赖 于 包 管 理 器 来 重新 构建 代码 ， 因 此 包 管 理 器 的 异常 会 很 快 以 错误 的 形式 
展现 出 来 。 



































当 你 从 Xcode 或 使 用 react-native run-android 命令 运行 项 目 时 ，React Native 包 管 理 器 
会 自动 加 载 。 但 在 关闭 项 目的 时 候 ， 它 并 不 会 自动 退出 。 这 意味 着 ， 如 果 你 切换 了 项 目 ， 
那么 包 管 理 器 仍 在 运行 ， 只 不 过 运行 在 错误 的 目录 下 ， 因 此 代码 会 编译 失败 。 所 以 请 确保 


包 管理 器 永远 运行 在 项 目 对 应 的 根 目录 下 。 你 可 以 通过 npm start 命令 来 启动 它 。 




















如 果 React Native 包 管理 器 在 启动 时 抛 出 了 一 些 奇怪 的 错误 ， 那 么 你 的 开发 环境 很 可 能 处 
于 不 良 的 状态 。 我 们 可 以 根据 之 前 描述 的 步骤 来 解决 这 个 问题 ， 确 保 npm、Node 和 react- 
native 的 本 地 文件 处 在 良好 的 状态 。 





93.5 ”部 署 至 iOS 设 备 的 问题 


当 你 尝试 在 真实 的 iOS 设备 上 测试 应 用 时 ， 可 能 会 遇 到 一 些 奇怪 的 问题 。 














如 果 在 上 传 应 用 到 iOS 设备 的 过 程 中 过 到 麻烦 ， 你 要 确保 已 经 正确 选择 了 你 的 设备 作为 构 
建 目标 。 你 的 设备 是 项 目 设置 里 支持 的 类 型 吗 ? 例如， 如 果 你 的 应 用 明确 地 禁用 了 iPad 设 
» 那么 你 就 不 能 部 署 到 iPad ET o 






















































































如 果 你 修改 文件 时 使 用 React Native 包 管理 器 重新 构建 的 话 ， 可 能 会 遇 到 图 9-16 中 的 错误 。 
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Could not connect to development server 
Ensure node server is running and available 
on the same network - run 'npm start' from 
react-native root 


URL: http://localhost:8081/index.ios.bundle 


Could not connect to the server. 














B 9-16: 无 法 连接 到 开发 服务 器 

这 表示 你 的 应 用 已 经 尝试 过 从 React Native 包 管 理 器 加 载 JavaScript 的 打包 文件 ， 但 它 无 法 
被 成 功 加 载 。 在 这 种 情况 下 ， 试 试 下 列 检查 步骤 。 

。 你 的 电脑 与 iOS 设备 是 否 在 相同 的 WiFi 网 络 下 ? 

。 React Native 包 管 理 器 是 否 运 行 在 项 目 目 录 下 ? 











9.3.6 ”模拟 器 行为 

你 可 能 会 不 时 发 现 设备 模拟 器 的 一 些 奇怪 的 行为 。 如 果 你 的 应 用 持续 不 断 地 月 涡 ， 或 者 修 
改 后 的 代码 无 法 在 模拟 器 上 反映 出 来 ， 那 么 首先 试 试 最 简单 的 办 法 ， 即 从 设备 上 删除 你 的 
应 用 。 

值得 注意 的 是 ， 简 单 地 删除 应 用 可 能 达 不 到 预期 的 效果 。 在 很 多 系统 上 ， 被 和 卸载 的 应 用 会 
有 一 些 残留 的 文件 ， 这 些 文件 在 今后 可 能 会 有 副作用 。 如 图 9-17 所 示 ， 最 直接 的 办 法 就 是 
重 置 整个 设备 模拟 器 ， 一 切 从 头 再 来 。 这 样 ， 模 拟 器 上 所 有 的 文件 和 应 用 都 将 被 移 除 。 























@ BSE eal File Edit Hardware 
About iOS Simulator 
Services > 


Reset Content and Settings... 





| Hide iOS Simulator 38H 
Hide Others X$H 
Quit iOS Simulator #Q 


eel 











& 9-17; Reset Content and Settings... 选项 将 会 清空 设备 


在 Android 模拟 器 上 也 是 类 似 的 ， 你 可 以 删除 模拟 器 ， 然 后 用 新 模拟 器 重新 再 试 。 


9.4 测试 代码 


学 会 调试 固然 很 好 ， 但 你 一 定 想 在 错误 发 生 之 前 就 阻止 它们 (如 果 不 可 避免 ， 就 捕获 它 
们 )。 自 动 化 测试 和 静态 类 型 检查 是 非常 实用 的 工具 ， 你 一 定 也 想 在 应 用 里 使 用 它们 。 





测试 JavaScript 代码 

大 部 分 你 写 的 React Native 代码 可 能 甚至 没有 意识 到 它们 被 运行 在 移动 环境 
里 了 。 例 如 ， 所 有 的 业务 逻辑 都 可 以 从 演 染 逻辑 中 隔离 出 来 。 这 意味 着 你 可 
以 使 用 任何 你 喜欢 的 普通 JavaScript 开发 工具 来 测试 你 的 JavaScript 代码 。 























这 一 节 将 具体 介绍 如 何 使 用 Flow 进行 类 型 检查 ， 以 及 如 何 使 用 Jest 进行 单元 测试 。 


9.4.1 使 用 Flow 进 行 类 型 检查 

Flow 是 一 个 静态 类 型 检查 的 JavaScript 类 库 。 它 依赖 类 型 推断 来 检测 类 型 错误 ， 甚 至 也 可 
以 检查 注释 代码 。 它 允许 你 逐渐 往 现 有 的 项 目 里 添加 注解 。 类 型 检查 可 以 帮助 你 尽早 发 现 
潜在 问题 ， 然 后 增强 不 同 组 件 和 模块 之 间 的 API 的 健壮 性 。 








= 


你 可 以 用 npm 安装 Flow: 
$ npm install -g flow-bin 
运行 Flow 是 很 简单 的 : 


$ flow check 





应 用 默认 自 带 了 flowconfig 文件 ， 它 配置 了 Flow 的 行为 。 如 果 你 发 现 了 很 多 关于 node_ 
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modules 的 错误 ， 可 能 需要 添加 这 一 行 代码 到 flowconfig 文件 的 [ignore] FH: 


.*/node_modules/.* 
再 次 运行 flow check， 就 没有 任何 错误 了 : 


$ flow check 
$ Found © errors. 


尽情 使 用 Flow 来 帮助 你 开发 React Native 应 用 吧 。 


9.4.2 ”使 用 Jest 进 行 单元 测试 














=> 


React Native 支持 使 用 Jest 来 测试 React Af. Jest 是 一 个 基于 Jasmine 的 单元 测试 框架 。 
它 提 供 了 侵入 性 的 依赖 自动 模拟 的 功能 ， 也 可 以 很 好 地 与 React 测试 工具 进行 整合 。 





使 用 Jest 需要 先进 行 安装 : 


npm install jest-cli --save-dev 





因为 我 们 只 需要 在 开发 环境 中 使 用 Jest， 而 不 是 生产 环境 ， 所 以 我 们 在 安装 的 时 候 使 用 了 


--save-dev 标记 。 


更 新 package.json 文件 ， 在 scripts 中 添加 test: 





{ 
"scripts": { 
"test": "jest" 


} 
ce 


运行 npm test 命令 之 后 ， 将 会 启动 jest。 


接 下 来 ， 创 建 一 个 _tests_/ Axe. Jest 将 会 递归 地 搜索 在 _tests_/ 目录 下 的 测试 文件 


然后 运行 它们 : 


mkdir __tests__ 











下 


现在 创建 一 个 新 文件 _tests_/dummy-testjs， 并 编写 我 们 的 第 一 个 测试 用 例 : 








‘use strict’; 


describe('a silly test', function() { 
it('expects true to be true’, function() { 
expect(true).toBe(true); 








现在 ， 如 果 你 运行 npm test， 会 看 到 测试 用 例 全 部 通过 了 。 


然 ， 除 了 这 个 简单 的 例子 之 外 ， 测 试 还 包含 更 丰富 的 内 容 。 如 果 想 了 解 更 多 关于 Jest 的 
息 ， 建 议 从 它 的 文档 开始 。 


























9.4.3 ”使 用 Jest 进 行 快 照 测试 
快照 测试 对 于 确保 你 的 UL 没有 发 生意 外 改变 是 非常 好 用 的 。 这 一 点 使 得 它 非常 适用 于 


React 组 件 。 此 外 ， 快 照 测 试 也 很 容易 编写 ， 需 要 的 配置 项 少 。 


在 React Native 中 ， 快 照 测 试 依赖 于 react-test-renderer 这 个 包 。 





npm install --save react-test-renderer 


例 9-1 演示 了 一 个 简单 的 Jest 测试 。 





例 9-1 Styles/tests/FlexDemo-test.js 


import React from "react"; 
import FlexDemo from "../FlexDemo"; 


import renderer from "react-test-renderer"; 


test("renders correctly", () => { 
const tree = renderer.create(<FlexDemo />).toJSON(); 


expect(tree).toMatchSnapshot(); 
}); 


如 你 所 见 ， 只 需要 编写 非常 少 的 代码 就 可 以 添加 一 个 快照 测试 。 
你 还 需要 更 新 package.json 文件 ， 将 Jest 作为 依赖 项 ， 并 加 上 react-native 的 测试 预 设 。 





"dependencies": { 
"jest": x" 


}, 
"jest": { 
"preset": "react-native" 


} 
当 你 第 一 次 运行 npm test 的 时 候 会 生成 一 份 “快照 "。 
$ npm test 


PASS __tests__/FlexDemo-test.js 
w renders correctly (1216ms) 





Snapshot Summary 
> 1 snapshot written in 1 test suite. 


快照 文件 的 内 容 如 例 9-2 所 示 。 
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例 9-2 初始 的 快照 文件 


// Jest Snapshot v1, https://goo.gl/fbAQLP 


exports[ renders correctly 1°] = ` 


<View 
style={ 
Object { 
"alignItems": "flex-end", 
"backgroundColor": "#F5FCFF", 
"borderColor": "#0099AA", 
"borderWidth": 5, 
"flex": 1, 
"flexDirection": "row", 
"marginTop": 30, 
} 
} 
> 
<Text 


accessible={true} 
allowFontScaling={true} 
ellipsizeMode="tail" 
style={ 
Object { 
"borderColor": "#AA0099", 
"borderWidth": 2, 


"flex": 1, 
"fontSize": 24, 
"textAlign": "center", 
} 
} 
> 
Child One 
</Text> 
<Text 


accessible={true} 
allowFontScaling={true} 
ellipsizeMode="tail" 
style={ 
Object { 
"borderColor": "#AA0099", 
"borderWidth": 2, 


"flex": 1, 
"fontSize": 24, 
"textAlign": "center", 
} 
} 
> 
Child Two 
</Text> 
<Text 


accessible={true} 
allowFontScaling={true} 
ellipsizeMode="tail" 
style={ 
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Object { 
"borderColor": "#AAQ099", 
"borderWidth": 2, 


"flex": 1, 
"fontSize": 24, 
"textAlign": "center", 
} 
} 
> 
Child Three 
</Text> 


</View> 


> 





不 要 去 手动 编辑 这 些 文件 。 相 反 ， 当 你 更 新 了 应 用 之 后 ， 可 以 再 次 运行 npm test。 如 有 果 组 
件 泻 染 的 内 容 和 快照 有 出 入 ，Jest 就 会 返回 失败 消息 ， 并 且 向 你 展示 组 件 的 预期 版 本 和 接 
收 版 本 之 间 的 差异 : 








$ npm test 
FAIL __tests__/FlexDemo-test.js 
e renders correctly 


expect(vaLlue) . toMatchSnapshot() 
Received value does not match stored snapshot 1. 


- Snapshot 
+ Received 


@@ -41,22 +41,6 @@ 
} 
} 


> 
Child Two 

</Text> 
- <Text 
- accessible={true} 
- allowFontScaling={true} 
- ellipsizeMode="tail" 
- style={ 
- Object { 
- "borderColor": "#AAQ0099", 
- "borderWidth": 2, 


- "flex": 1, 

- "fontSize": 24, 

- "textAlign": "center", 
< } 

- } 

- > 


- Child Three 
- </Text> 
</View> 
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at Object.<anonymous> (__tests__/FlexDemo-test.js:11:14) 
X renders correctly (66ms) 


Snapshot Summary 
> 1 snapshot test failed in 1 test suite. 





在 检查 差异 时 ， 你 可 以 决定 这 些 更 改 是 不 是 错误 的 ， 或 者 选择 更 新 快照 来 展示 改动 之 处 。 
这 份 快照 文件 应 该 纳入 源码 的 管理 中 。 


95 当 你 陷入 困境 


如 果 你 遇 到 一 个 特别 环 手 的 问题 ， 并 且 自 己 无 法 解决 的 话 ， 可 以 尝试 咨询 社区 。 你 可 以 去 
这 些 地 方 寻求 建议 : 











e #reactnative IRC 聊天 室 (irc.lc/freenode/reactnative) 
e React 讨论 论坛 (https://discuss.reactjs.org/) 
。 Stack Overflow (http://stackoverflow.com/questions/tagged/react-native ) 


如 果 怀 疑 所 遇 到 的 问题 可 能 是 React Native 自身 的 bug， 可 以 去 GitHub 检查 现 有 的 问题 列 


表 (https://github.com/facebook/react-native/issues)。 在 提交 问题 的 时 候 ， 使 用 一 个 小 的 示 
例 程序 帮助 你 说 明 问 题 通常 是 很 实用 的 。 





9.6 小 结 


总 体 来 说 ， 调 试 React Native 与 调试 Web 平台 上 的 React 应 该 会 有 非常 相似 的 体验 。 大 多 
数 你 熟悉 的 工具 在 这 里 依然 可 用 ， 这 可 以 让 你 更 容易 过 渡 到 React Native 开发 。 话 虽 如 此 ， 
React Native 应 用 有 它 特 有 的 复杂 性 ， 有 时 候 这 种 复杂 性 会 表现 为 一 些 邻 人 诅 形 的 bug。 了 解 
调试 应 用 的 方法 以 及 环境 产生 的 错误 信息 ， 将 会 对 你 形成 高 效 的 工作 方式 有 持续 的 帮助 。 
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大 型 应 用 中 的 导航 与 结构 





前 文中 已 经 介绍 了 许多 构建 React Native 应 用 的 知识 ， 本 章 将 整合 并 应 用 这 些 知 识 。 目 
前 所 介绍 的 大 部 分 是 小 型 应 用 ， 本 章 将 介绍 大 型 应 用 的 基本 结构 。 我 们 将 介绍 如 何 使 用 
react-navigation 中 的 <StackNavigation> 组 件 ， 来 处 理应 用 中 不 同 屏幕 之 间 的 切换 。 


本 章 中 的 示例 应 用 还 会 在 第 11 章 中 使 用 ， 届 时 我 们 会 看 到 如 何 将 Redux 状态 管理 库 整 个 
到 我 们 的 应 用 中 。 


10.1 WEA 


本 章 中 ， 我 们 会 构建 一 个 内 卡 应 用 ， 人 允许 用 户 创建 卡片 ， 随 后 查看 它们 。 闪 卡 应 用 会 比 我 
们 之 前 开发 的 示例 应 用 更 复杂 一 些 。 学 习 它 主要 是 为 了 了 解 如 何 开发 更 复杂 的 应 用 。 该 应 
用 的 所 有 代码 都 在 GitHub 上 (https://github.com/bonniee/learning-react-native/tree/2.0.0/sre/ 
fashcards) ， 源 码 完全 基于 JavaScript， 而 且 是 完全 跨 平台 的 ， 在 Android 平台 上 的 表现 与 
iOS 上 的 相 一 致 ， 并 且 兼 容 Expo (意味 着 你 可 以 使 用 Create React Native App). 


























ap 





























如 图 10-1 所 示 ， 内 卡 应 用 有 3 个 主要 的 视图 。 











。 主 界面 ， 列 出 了 存在 的 分 组 ， 并 且 可 以 创建 新 的 分 组 。 
。 创建 卡片 界面。 
。 复习 界面 。 
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图 10-1: 查看 分 组 、 创 建 卡片 以 及 复习 卡片 


该 应 用 的 用 户主 要 有 两 个 交互 流程 。 第 一 个 是 内 容 的 创建 〈 即 创建 分 组 和 卡片 )。 创 建 内 
容 的 流程 如 下 (如 图 10-2 所 示 )。 


(1) 用 户 点 击 Create Deck 按钮 。 

(2) 用 户 输入 一 个 分 组 名 称 ， 然 后 轻 触 返回 按钮 或 点 击 Create Deck 按钮 继续 创建 。 

(3) 用 户 在 Front 和 Back 输入 框 输入 内 容 ， 然 后 点 击 Create Card, 

(4) 输出 零 个 或 多 个 卡片 之 后 ， 用 户 可 能 会 点 击 Done 按钮 返回 初始 界面 ， 也 可 能 点 击 
Review Deck 按钮 进行 复习 。 




















[Carrier 全 1:40 AM + | Carrier 他 11:40 AM Ds | Carrier 他 1:41AM Ds | Carrier 他 1:41 AM = 
@ All Decks 6] All Decks @ Create Card @ All Decks 
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Back: ee) 
Create Deck Esperanto Hello] Esperanto: 1cards EE] 
Create Deck Create Card ceap eck 
qwert yiuiooplqwert yu iiop 
alsldlflglhljlkl1 asdfghj kl 
B zixic v binim eo zx c vibnm 
space space 
































图 10-2: 创建 一 个 分 组 
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第 二 个 主要 的 交互 流程 是 卡片 的 复习 (如 图 10-3 所 示 )。 


(1) 用 户 点 击 需 要 复习 的 分 组 名 。 

(2) 展现 问答 界面 给 用 户 。 

(3) 用 户 点 击 其 中 一 个 选项 。 

(4) 应 用 根据 猜测 正确 与 否 来 反馈 给 用 户 。 
(5) 点 击 Continue 按钮 ， 继 续 复 习 。 


(6) 所 有 的 复习 完成 之 后 ， 用 户 会 看 到 Reviews cleared! 界面 。 








Carrier $ 


i201 Pw 
@ All Decks 
create Deck | dere | 


Gs] Carrier $ 


die Katze 


re 
Stop Reviewing 














Reviews cleared! 
88% correct 








图 10-3: 复习 卡片 


我 们 将 使 用 办 卡 应 用 ， 尤 其 是 上 面 描述 的 特性 ， 来 讨论 一 些 关 于 构建 完整 应 用 的 模式 以 及 


出 现 的 问题 。 


10.2 项目 结构 
以 下 是 项 目 大 体 的 结构 : 


flashcards 
icon.png 
| index. js 
H src_checkpoint_01 
— components 
| H Button. js 
| =F DeckScreen 
| =F Flashcards. js 
| “上 六 Header 
| į} HeadingText. js 
| =F Input. js 
| į} LabeledInput. js 
| ”上 六 NewCardScreen 
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ormalText.js 
eviewScreen 


Dz 


H src_checkpoint_02 
| 一 src_checkpoint_03 


| 一 src_checkpoint_04 


在 flashcards 目录 内 ， 实 际 上 包含 了 4 个 文件 夹 : src_checkpoint_01, src_checkpoint_02, 
src_checkpoint_03 和 src_checkpoint_04。 它 们 分 别 代 表 了 我 们 开发 过 程 中 不 同 的 应 用 状态 。 
接 下 来 从 src_checkpoint_01 开始 。 

components/ 


所 有 的 React 组 件 都 在 这 





Fo 


data/ 
这 里 可 以 找到 数据 模型 ， 用 来 表示 办 卡 、 分 组 和 复习 。 





styles/ 
这 里 可 以 找到 样式 对 象 ， 支 持 在 任何 地 方 复 用 。 




















10.2.1 应 用 屏幕 


该 应 用 有 3 个 主场 景 ， 它 们 可 以 在 任何 时 候 被 展现 。 














首先 ， 我 们 可 以 在 主 界面 包 








hoi 











建 分 组 。 这 个 界面 将 显示 现 有 的 所 有 分 组 ， 如 图 10-4 所 示 。 
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B 10-4: 从 主 界面 创建 分 组 


在 一 开始 的 代码 版 本 中 ， 每 个 屏幕 都 是 作为 一 个 组 件 实现 的 ， 但 它们 还 设 有 互相 关联 。 如 果 你 
试 着 和 应 用 交互 ， 那 么 就 会 显示 一 个 Notimplemented (“未 实现 ”) 的 警告 信息 ( 见 图 10-5). 











Carrier > 12:14 PM =: 


@ FLASHCARDS 


Create Deck 




















810-5: 如 果 你 试 着 和 应 用 交互 ， 就 会 显示 一 个 警告 
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应 用 的 根 组 件 位 于 components/Flashcards.js, 415i] 10-1 所 示 。 


例 10-1 src_checkpoint_01/components/Flashcards.js 


import React, { Component } from "react"; 
import { StyleSheet, View } from "react-native"; 


import Heading from "./Header"; 

import DeckScreen from "./DeckScreen"; 
import NewCardScreen from "./NewCardScreen"; 
import ReviewScreen from "./ReviewScreen"; 


class Flashcards extends Component { 
_renderScene() { 
// return <ReviewScreen />; 
// return <NewCardScreen />; 
return <DeckScreen />; 


} 
render() { 
return ( 
<View style={styles.container}> 
<Heading /> 
{this._renderScene()} 
</View> 
); 
} 


} 
const styles = StyleSheet.create({ container: { flex: 1, marginTop: 30 } }); 


export default Flashcards; 


查看 分 组 、 创 建 卡片 以 及 复习 卡片 的 屏幕 ， 分 别 在 <DeckScreen>, <NewCardScreen> 和 
<ReviewScreen> 组 件 中 实现 。 





如 例 10-2 所 示 ，<DeckScreen> 用 于 泻 染 一 个 已 创建 的 分 组 ， 以 及 一 个 用 来 创建 新 分 组 的 
按钮 。 


例 10-2 src_checkpoint_01/components/DeckScreen/index.js 


import React, { Component } from "react"; 
import { View } from "react-native"; 


import { MockDecks } from "./../../data/Mocks"; 
import Deck from "./Deck"; 
import DeckCreation from "./DeckCreation"; 
class DecksScreen extends Component { 
static displayName = "DecksScreen"; 


constructor(props) { 
super (props); 
this.state = { decks: MockDecks }; 





_mkDeckViews() { 
if (!this.state.decks) { 
return null; 


} 


return this.state.decks.map(deck => { 
return <Deck deck={deck} count={deck.cards. length} key={deck.id} />; 
}); 
} 


render() { 
return ( 
<View> 
{this._mkDeckViews()} 
<DeckCreation /> 
</View> 
)3 
} 
} 


export default DecksScreen; 


<NewCardscreen>， 如 例 10-3 所 示 ， 拥 有 一 个 用 来 创建 新 卡片 的 输入 框 。 实 际 处 理 创 建 办 





卡 的 回调 逻辑 还 没有 实现 。 





例 10-3 src_checkpoint_01/components/NewCardScreen/index.js 


import React, { Component } from "react"; 
import { StyleSheet, View } from "react-native"; 


import DeckModel from "./../../data/Deck"; 


import Button from "../Button"; 

import LabeledInput from "../LabeledInput"; 
import NormalText from "../NormalText"; 
import colors from "./../../styles/colors"; 


class NewCard extends Component { 
constructor(props) { 
super (props); 
this.state = { font: "", back: "" }; 


} 


_handleFront = text => { 
this.setState({ front: text }); 
}; 


_handleBack = text => { 
this.setState({ back: text }); 
}; 


_createCard = () => { 
console.warn("Not implemented"); 
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J 


_reviewDeck = () => { 
console.warn("Not implemented"); 


J; 


_doneCreating = () => { 
console.warn("Not implemented"); 


}; 
render() { 
return ( 
<View> 
<LabeledInput 
label="Front" 
clearOnSubmit={false} 
onEntry={this._handleFront} 
onChange={this._handleFront} 
/> 
<LabeledInput 
label="Back" 
clearOnSubmit={false} 
onEntry={this._handleBack} 
onChange={this._handleBack} 
/> 
<Button style={styles.createButton} onPress={this._createCard}> 
<NormalText>Create Card</NormalText> 
</Button> 
<View style={styles.buttonRow}> 
<Button style={styles.secondaryButton} onPress={this._doneCreating}> 
<NormalText>Done</NormalText> 
</Button> 
<Button style={styles.secondaryButton} onPress={this._reviewDeck}> 
<NormalText>Review Deck</NormalText> 
</Button> 
</View> 
</View> 
); 
} 


} 


const styles = StyleSheet.create({ 
createButton: { backgroundColor: colors.green }, 
secondaryButton: { backgroundColor: colors.blue }, 
buttonRow: { flexDirection: "row" 


p; 


export default NewCard; 


<ReviewScreen>, Anf 10-4 所 示 ， 通 过 多 重 选 择 的 格式 展示 一 系列 的 复习 卡片 。 一 旦 用 户 
选择 了 答案 ， 就 会 显示 下 一 张 复 习 卡 片 。 





例 10-4 src_checkpoint_01/components/ReviewScreen/index.js 


import React, { Component } from "react"; 

import { StyleSheet, View } from "react-native"; 
import ViewCard from "./ViewCard"; 

import { MockReviews } from "./../../data/Mocks"; 
import { mkReviewSummary } from "./ReviewSummary"; 
import colors from "./../../styles/colors"; 


class ReviewScreen extends Component { 
static displayName = "ReviewScreen"; 


constructor(props) { 
super (props); 
this.state = { 
numReviewed: 0, 
numCorrect: 0, 
currentReview: 0, 
reviews: MockReviews 
J; 
} 


onReview = correct => { 
if (correct) { 
this.setState({ numCorrect: this.state.numCorrect + 1 }); 
} 
this.setState({ numReviewed: this.state.numReviewed + 1 }); 


}5 


_nhextReview = () => { 
this.setState({ currentReview: this.state.currentReview + 1 }); 


}5 


_quitReviewing = () => { 
console.warn("Not implemented"); 


Js 


_contents() { 
if (!this.state.reviews || this.state.reviews.length === 0) { 
return null; 


} 


if (this.state.currentReview < this.state.reviews.length) { 
return ( 
<ViewCard 
onReview={this.onReview} 
continue={this._nextReview} 
quit={this._quitReviewing} 
{...this.state.reviews[this.state.currentReview] } 
/> 
); 
} else { 
let percent = this.state.numCorrect / this.state.numReviewed; 
return mkReviewSummary(percent, this. _quitReviewing); 


} 
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} 


render() { 
return ( 
<View style={styles.container}> 
{this._contents()} 
</View> 
)3 
} 
} 


const styles = StyleSheet.create({ 
container: { backgroundColor: colors.blue, flex: 1, paddingTop: 24 } 
); 


export default ReviewScreen; 


你 会 发 现 ， 这 些 屏 幕 使 用 的 很 多 组 件 都 不 是 内 置 的 React Native 组 件 ， 而 是 为 构建 办 卡 应 
用 而 提供 的 可 复 用 组 件 。 现 在 让 我 们 来 看 看 这 些 组 件 。 





10.2.2 ”可 复 用 组 件 

如 前 所 述 ， 当 你 开发 大 型 应 用 时 ， 编 写 能 不 断 复 用 的 样式 组 件 是 非常 有 用 的 。 如 此 一 来 ， 
大 多 数 的 组 件 都 不 需要 使 用 <Text> ZAP YE, Tie (AA <HeadingText> 和 <NormaLText> 
组 件 来 代替 。 类 似 地 ，<Button> 组 件 也 经 常会 被 复 用 ，<Input> 和 <LabeledInput> 组 件 也 
是 如 此 。 这 样 做 可 以 提高 代码 的 可 读 性 ， 让 创建 新 组 件 变 得 更 加 容易 ， 也 利于 重新 调整 
应 用 。 





7 

















下 面 要 介绍 的 组 件 都 是 可 复 用 组 件 。 在 内 卡 应 用 里 ， 从 代码 的 起 始 阶段 ， 到 最 终 变 成 可 用 


的 产品 ， 我 们 会 一 直 使 用 它们 。 
首先 要 介绍 的 是 简单 的 <Button> 组 件 ， 如 例 10-5 所 示 。 它 可 以 将 任何 组 件 (通过 this. 


props.children) 封装 到 一 个 <TouchableOpacity> 组 件 中 。 同 时 ， 它 接收 一 个 onPress H 

















调 函 数 ， 让 你 可 以 通过 属性 去 覆盖 它 的 样式 。 





例 10-5 src_checkpoint_01/components/Button.js 


import React, { Component } from "react"; 
import { StyleSheet, View, TouchableOpacity } from "react-native"; 


import colors from "./../styles/colors"; 


class Button extends Component { 
static displayName = "Button"; 


render() { 
let opacity = this.props.disabled ? 1: 0.5; 
return ( 
<TouchableOpacity 





152 


| 第 10 章 


activeOpacity={opacity} 
onPress={this.props.onPress} 
style={[styles.wideButton, this.props.style]} 


{this.props.children} 
</TouchableOpacity> 
)3 
} 
} 


Button.defaultProps = { disabled: false }; 
export default Button; 


const styles = StyleSheet.create({ 
wideButton: { 
justifyContent: "center", 
alignItems: "center", 
padding: 10, 
margin: 10, 
backgroundColor: colors.pink 
} 
}); 





接 下 来 是 <Normaltext> 组 件 ， 如 例 10-6 所 示 。 它 和 普通 的 <Text> 组 件 区 别 不 大 ， 只 是 应 
用 了 一 些 样式 ， 根 据 窗口 尺寸 来 缩放 字体 大 小 。 











例 10-6 src_checkpoint_01/components/NormalText.js 


import React, { Component } from "react"; 
import { StyleSheet, Text, View } from "react-native"; 


import { fonts, scalingFactors } from "./../styles/fonts"; 
import Dimensions from "Dimensions"; 
let { width } = Dimensions.get("window"); 


class NormalText extends Component { 
static displayName = "NormalText"; 


render() { 
return ( 
<Text style={[this.props.style, fonts.normal, scaled.normal]}> 
{this.props.children} 
</Text> 
)3 
} 
} 


const scaled = StyleSheet.create({ 
normal: { fontSize: width * 1.0 / scalingFactors.normal } 


FJ; 


export default NormalText; 
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<HeadingText>, 4nf%i] 10-7 所 示 ， 和 <NormalText> 非常 相似 ， 只 不 过 字体 会 更 大 一 些 。 


例 10-7 src_checkpoint_01/components/HeadingText.js 


import React, { Component } from "react"; 
import { StyleSheet, Text, View } from "react-native"; 


import { fonts, scalingFactors } from "./../styles/fonts"; 
import Dimensions from "Dimensions"; 
let { width } = Dimensions.get("window"); 


class HeadingText extends Component { 
static displayName = "HeadingText"; 


render() { 
return ( 
<Text style={[this.props.style, fonts.big, scaled.big]}> 
{this.props.children} 
</Text> 
)3 
} 
} 


const scaled = StyleSheet.create({ 
big: { fontSize: width / scalingFactors.big } 
); 


export default HeadingText; 


<Input>， 如 例 10-8 所 示 ， 围 绕 内 置 的 <TextInput> 提供 了 一 些 切合 实际 的 默认 属性 ， 
处 理 状态 的 更 新 ， 并 触发 回调 。 











例 10-8 src_checkpoint_ 01/components/Input.js 


import React, { Component } from "react"; 
import { StyleSheet, TextInput, View } from "react-native"; 


import colors from "./../styles/colors"; 
import { fonts } from "./../styles/fonts"; 


class Input extends Component { 
constructor(props) { 
super(props); 
this.state = { text: "" }; 


} 


_create = () => { 
this.props.onEntry(this.state. text); 
this.setState({ text: "" }); 

}; 


_onSubmit = ev => { 
this.props.onEntry(ev.nativeEvent. text); 
if (this.props.clearOnSubmit) { 





this.setState({ text: "" }); 


} 
+ 


_onChange = text => { 
this.setState({ text: text }); 
if (this.props.onChange) { 

this.props.onChange( text); 
} 
F; 


render() { 
return ( 
<TextInput 
style={[ 
styles.nameField, 
styles.wideButton, 
fonts.normal, 
this.props.style 
]} 
ref="newDeckInput" 
multiline={false} 
autoCorrect={false} 
onChangeText={this._onChange} 
onSubmitEditing={this._onSubmit} 


) ; 
} 
} 


// 如 果 不 另 行 指定 ， 则 使 用 默认 属性 
Input.defaultProps = { clearOnSubmit: true }; 





export default Input; 


const styles = StyleSheet.create({ 
nameField: { backgroundColor: colors.tan, height: 60 }, 
wideButton: { justifyContent: "center", padding: 10, margin: 10 } 


p; 





F 


<LabledInput>， 如 例 10-9 所 示 ， 组 合 使 用 了 <Input> 和 <NormalText> 组 件 。 


例 10-9 src_checkpoint 01/components/LabeledInput.js 


import React, { Component } from "react"; 
import { StyleSheet, View } from "react-native"; 


import Input from "./Input"; 
import NormalText from "./NormalText"; 


class LabeledInput extends Component { 
render() { 
return ( 
<View style={styles.wrapper}> 
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<NormalText style={styles.label}> 
{this.props.label}: 

</NormalText> 

<Input 
onEntry={this.props.onEntry} 
onChange={this.props.onChange} 
clearOnSubmit={this.props.clearOnSubmit} 
style={this.props.inputStyle} 

/> 

</View> 
} 
} 


const styles = StyleSheet.create({ 
label: { paddingLeft: 10 }, 
wrapper: { padding: 5 } 

}); 


export default LabeledInput; 


10.2.3 样式 
除了 可 复 用 组 件 外 ， 在 styles 目录 中 还 有 几 个 样式 表 ， 它 们 在 整个 闪 卡 应 用 中 都 是 可 复 用 
的 。 我 们 开发 办 卡 应 用 时 不 会 修改 这 些 文件 。 





首先 是 fontsjs， 这 个 文件 设置 了 一 些 默认 的 字号 和 颜色 ( 见 例 10-10)。 


例 10-10 src_checkpoint_01/styles/fonts.js 


import { StyLeSheet } from "react-native"; 


export const fonts = StyleSheet.create( 
Normal: { fontSize: 24 }, 
alternate: { fontSize: 50, color: "#FFFFFF" }, 
big: { fontSize: 32, alignSelf: "center" } 


p; 


export const scalingFactors = { normal: 15, big: 10 }; 





























其 次 是 colorsjs， 它 定义 了 应 用 中 会 使 用 到 的 一 些 颜 色 值 (LA 10-11). 


例 10-11 src_checkpoint 01/styles/colors.js 


export default (palette = { 
pink: "#FDA6CD", 
pink2: "#d35d90", 
green: "#65ed99", 
tan: "#FFEFE8", 
blue: "#5DA9E9", 
gray1: "#888888" 


p; 





10.2.4 ”数据 模型 


既然 我 们 已 经 了 解 内 卡 应 用 是 怎样 处 至 


需要 记录 哪些 数据 呢 ? 应 该 怎么 做 ? 





LE 泻 染 逻辑 的 ， 那 么 它 又 是 如 何 处 理 数据 的 呢 ?” 我 们 





我 们 关心 两 个 基本 的 模型 : 卡片 (Card) 和 分 组 (Deck)。 复 习 功 能 是 基于 卡片 和 分 组 构 





建 的 ， 不 过 我 们 不 需要 存储 它们 。 l 
用 去 处 理 纯 JavaScript 对 象 。 




















PI 








下 的 类 提供 了 一 些 使 用 分 组 和 卡片 的 功能 ， 让 我 们 不 











Deck 类 如 例 10-12 所 示 ， 让 你 可 以 基于 一 个 名 称 来 构建 分 组 。 每 一 个 Deck 都 包含 了 一 个 
Card 数组 。 它 还 提供 了 一 个 将 卡片 添加 到 分 组 的 简便 方法 。 








例 10-12 
import md5 from "md5"; 
class Deck { 


constructor(name) { 
this.name = name; 








在 例 10-12 中 ， 我 们 使 用 了 mds 模块 ， 基 于 卡片 和 分 组 的 数据 来 生成 简单 的 ID 编号 。 


src_checkpoint_01/data/Deck.js 


this.id = md5("deck:" + name); 


this.cards = []; 


} 


setFromObject(ob) { 
this.name = ob.name; 
this.cards = ob.cards; 
this.id = ob.id; 


} 


static fromObject(ob) { 


let d = new Deck(ob.name); 


d.setFromObject(ob); 
return d; 


} 


addCard(card) { 


this.cards = this.cards.concat(card); 


} 
} 


export default Deck; 





卡片 分 成 正 反 两 面 ， 并 且 卡 片 是 属于 分 组 的 。Card 类 如 例 10-13 所 示 。 





例 10-13 


import md5 from "md5"; 


class Card { 


src_checkpoint_01/data/Card.js 


constructor(front, back, deckID) { 
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this.front = front; 

this.back = back; 

this.deckID = deckID; 

this.id = md5(front + back + deckID); 
} 


setFromObject(ob) { 
this.front = ob.front; 
this.back = ob.back; 
this.deckID = ob.deckID; 
this.id = ob.id; 


} 


static fromObject(ob) { 
let c = new Card(ob.front, ob.back, ob.deckID); 
c.setFrom0bject(ob); 
return c; 
} 
} 


export default Card; 














QuizCardView 如 例 10-14 所 示 ， 实 际 上 这 是 一 个 部 分 复习 ， 其 中 包括 了 一 个 问题 、 几 个 可 
能 的 回答 、 一 个 正确 答案 ， 以 及 卡片 的 方向 〈 例 如 ， 它 是 从 英语 到 西班牙 语 ， 还 是 从 西 班 
牙 语 到 英语 )。 这 个 类 还 包含 了 一 个 从 一 组 卡片 生成 复习 的 方法 。 


例 10-14 src_checkpoint_01/data/QuizCardView.js 


import _ from "lodash"; 


class QuizCardView { 
constructor(orientation, cardID, prompt, correctAnswer, answers) { 
this.orientation = orientation; 
this.cardID = cardID; 
this.prompt = prompt; 
this.correctAnswer = correctAnswer; 
this.answers = answers; 
} 
} 


function mkReviews(cards) { 
let makeReviews = function(sideOne, sideTwo) { 
return cards.map(card => { 
let others = cards.filter(other => { 


return other.id !== card.id; 
}); 
let answers = _.shuffle( 
[card[sideTwo]].concat(_.sampleSize(_.map(others, sideTwo), 3)) 
)3 
return new QuizCardView( 
sideOne, 
card.id, 





card[sideOne], 
card[sideTwo], 
answers 

); 

}); 

33 


let reviews = makeReviews("front", "back").concat( 
makeReviews("back", "front") 

); 

return _.shuffle(reviews); 


} 


export { mkReviews, QuizCardView }; 


Boia, Mocks 类 提供 了 一 些 模 拟 数据 ， 可 以 用 来 测试 和 开发 应 用 〈 见 例 10-15)。 





例 10-15 src_checkpoint_01/data/Mocks.js 


import CardModel from "./Card"; 
import DeckModel from "./Deck"; 
import { mkReviews } from "./QuizCardView"; 


let MockCards = [ 
new CardModel("der Hund", "the dog", "fakeDeckID"), 
new CardModel('"das Kind", "the child", "fakeDeckID"), 
new CardModel("die Frau", "the woman", "fakeDeckID"), 
new CardModel("die Katze", "the cat", "fakeDeckID") 
J; 


let MockCard = MockCards[0]; 
let MockReviews = mkReviews(MockCards); 
let MockDecks = [new DeckModel("French"), new DeckModel("German")]; 


MockDecks.map(deck => { 
deck.addCard(new CardModel("der Hund", "the dog", deck.id)); 
deck.addCard(new CardModel("die Katze", "the cat", deck.id)); 
deck.addCard(new CardModel("das Brot", "the bread", deck.id)); 
deck.addCard(new CardModel("die Frau", "the woman", deck.id)); 
return deck; 


}); 
let MockDeck = MockDecks[0]; 


export { MockReviews, MockCards, MockCard, MockDecks, MockDeck }; 


这 些 文件 都 放 在 data 目录 中 ， 在 开发 内 卡 应 用 期 间 ， 我 们 不 会 修改 它们 。 


10.3 使 用 React Navigation 


现在 ， 我 们 已 经 有 了 一 个 应 用 的 雏形 ， 已 经 涉及 了 大 部 分 的 泻 染 ， 但 还 没有 添加 功能 。 让 
我 们 继续 完善 它 ， 使 其 可 以 在 应 用 内 部 进行 导航 。 
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移动 应 用 通常 都 会 涉及 多 个 屏幕 ， 并 且 提 供 屏 幕 之 间 的 过 渡 方 式 。 导 航 库 可 以 处 理 这 些 过 
渡 ， 并 且 给 予 开 发 者 一 种 表达 屏幕 间 关 系 的 方式 。 在 React Native 中 可 以 选用 几 种 不 同 的 
库 。 我 们 选择 React Navigation 进行 介绍 ， 它 是 由 React 社区 的 GitHub 项 目 (https://github. 
com/react-community) 提供 的 一 个 库 。 


























10.3.1 创建 StackNavigator 
首先 我 们 要 将 react-navigatton 添加 到 项 目 中 。 
npm install --save react-navigation 


React Navigation 实际 上 提供 了 几 种 导航 器 (navigator)。 导 航 器 可 以 泻 染 常见 的 、 可 配置 
的 UI 元 素 ， 例 如 页 眉 。 它 们 还 确定 了 应 用 的 导航 结构 。 我 们 将 使 用 StackNavigator， 它 

次 渲染 一 个 屏幕 ， 并 且 提 供 了 屏幕 “ 栈 ” 之 间 的 过 渡 功 能 。 这 可 能 是 移动 应 用 最 常见 的 
UI 模式 了 。 




















React Navigation 还 提供 了 其 他 导航 器 ， 例 如 TabNavigator 和 DrawerNavigator， 它 们 为 应 
用 结构 提供 了 略微 不 同 的 视角 。 在 一 个 应 用 中 ， 你 可 以 将 数 个 导航 器 组 合 使 用 。 




















现在 ， 让 我 们 在 components/Flashcards.js 中 导入 StackNavigator。 


import { StackNavigator } from "react-navigation" 


为 了 使 用 StackNavigator ， 我 们 需要 创建 它 ， 并 且 向 它 提供 可 用 屏幕 的 信息 。 


let navigator = StackNavigator({ 
Home: { screen: DeckScreen }, 
Review: { screen: ReviewScreen }, 
CardCreation: { screen: NewCardScreen } 


p; 
然后 ， 我 们 在 Flashcards.js 中 导出 这 个 导航 器 ， 取 代 原 来 的 导出 <FLashcards> 组 件 的 方式 。 





export default navigator; 


10.3.2 {FA navigation. navigatett em Z lA WIE 

创建 一 个 StackNavigator 之 后 ， 我 们 得 到 了 什么 ? BE, StackNavigator 中 的 每 个 屏幕 都 
会 通过 一 个 特殊 的 navigation 属性 来 演 染 。 如 果 我 们 进行 如 下 调用 ， 那 么 导航 器 会 尝试 找 
到 名 字 适 合 的 屏幕 来 演 染 。 








this.props.navigation.navigate("SomeRoute"); 


此 外 ， 我 们 可 以 通过 在 栈 中 向 后 一 步 来 导航 : 





this.props.navigation.goBack(); 





160 | #102 


tt 


现在 来 修改 <Deckscreen> 组 件 ， 以 便 在 分 组 上 点 击 的 时 候 ， 可 以 跳 转 到 复习 屏幕 





<ReviewScreen>, 


首先 来 看 看 <Deckscreen> 用 到 的 <Deck> 组 件 ( 见 例 10-16). 





例 10-16 src_checkpoint_01/components/DeckScreen/Deck.js 


import React, { Component } from "react"; 
import { StyleSheet, View } from "react-native"; 


import DeckModel from "./../../data/Deck"; 
import Button from "./../Button"; 

import NormalText from "./../NormalText"; 
import colors from "./../../styles/colors"; 


class Deck extends Component { 
static displayName = "Deck"; 


_review = () => { 
console.warn("Not implemented"); 


F 


_addCards = () => { 
console.warn("Not implemented"); 


33 
render() { 
return ( 
<View style={styles.deckGroup}> 
<Button style={styles.deckButton} onPress={this._review}> 
<NormalText> 
{this.props.deck.name}: {this.props.count} cards 
</NormalText> 
</Button> 
<Button style={styles.editButton} onPress={this._addCards}> 
<NormalText>+</NormalText> 
</Button> 
</View> 
)3 
} 


} 


const styles = StyleSheet.create({ 
deckGroup: { 
flexDirection: "row", 
alignItems: "stretch", 
padding: 10, 
marginBottom: 5 


}, 


deckButton: { backgroundColor: colors.pink, padding: 10, margin: 0, flex: 1 }, 


editButton: { 
width: 60, 
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backgroundColor: colors.pink2, 
justifyContent: "center", 
alignItems: "center", 
alignSelf: "center", 
padding: 0, 
paddingTop: 10, 
paddingBottom: 10, 
margin: 0, 
flex: 0 
} 
); 


export default Deck; 





修改 Deckjs 中 的 -review()， 使 其 调用 review 属性 : 


_review = () => { 
this.props.review(); 


现在 ， 当 用 户 轻 击 分 组 相关 的 按钮 时 ， 这 个 属性 会 被 调用 。 
接 下 来 要 更 新 DeckScreen/index.js。 
我 们 也 需要 在 这 里 添加 一 个 review 函数 : 


_review = () => { 
console.warn( "Actual reviews not implemented"); 
this.props.navigation.navigate("Review"); 


要 注意 的 是 ， 我 们 使 用 了 第 头 函 数 声明 语法 ， 以 便 让 函数 正确 地 绑 定 到 组 件 类 。 虽 然 
React 的 生命 周期 方法 可 以 自动 绑 定 到 组 件 示 例 ， 但 是 其 他 的 一 些 方法 可 不 是 自动 绑 定 的 。 


PR a BE BAY <Deck> 组 件 的 代码 ， 使 其 包含 恰当 的 属性 : 








_mkDeckViews() { 
if (!this.state.decks) { 
return null; 


} 


return this.state.decks.map((deck) => { 
return ( 
<Deck 
deck={deck} 
count={deck.cards. length} 
key={deck.id} 
review={this._ review} />); 
})3 
} 


现在 运行 应 用 。 当 你 轻 击 分 组 时 ， 应 该 就 能 跳 转 到 复习 屏幕 了 。 不 错 ! 
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10.3.3 (@ A navigationOptionsaLS nis 
我 们 还 可 以 将 navigationOptions 导航 选项 传递 给 StackNavigator RACE JUA MERIA. 


接 下 来 更 新 Flashcards.js 文件 ， 设 置 一 些 基础 的 页 丑 样 式 选 项 ( 见 例 10-17)。 











例 10-17 src_checkpoint_02/components/Flashcards.js 


import React, { Component } from "react"; 

import { StyleSheet, View } from "react-native"; 
import { StackNavigator } from "react-navigation"; 
import Logo from " 
import DeckScreen from "./DeckScreen"; 
import NewCardScreen from "./NewCardScreen"; 
import ReviewScreen from "./ReviewScreen"; 


. /Header/Logo"; 


let headerOptions = { 
headerStyle: { backgroundColor: "#FFFFFF" }, 
headerLeft: <Logo /> 
}; 
let navigator = StackNavigator({ 
Home: { screen: DeckScreen, navigationOptions: headerOptions }, 
Review: { screen: ReviewScreen, navigationOptions: headerOptions }, 


CardCreation: { screen: NewCardScreen, navigationOptions: headerOptions } 


p); 


export default navigator; 


此 外 ， 在 DeckScreen/index.js 文件 里 ， 我 们 还 要 设置 更 多 的 navigationOptions, 


class DecksScreen extends Component { 
static navigationOptions = { 


title: ' ALL Decks' 
J; 


T 





设置 title 会 修改 StackNavigator TA P EAA. 




















如 果 再 次 查看 应 用 ， 就 会 看 到 修改 已 经 生效 了 (ILE 10-6). 
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Carrier > 2:23 PM = 


All Decks 


French: 4 cards [=] 
German: 4 cards [=] 


Create Deck 














10-6; 通过 navigationOptions 设置 标题 


10.3.4 “实现 余下 逻辑 
现在 我 们 已 经 有 了 StackNavigator ， 我 们 需要 把 它 连接 到 应 用 的 其 他 部 分 。 上 有 具体 来 说 ， 下 
列 交 互 行为 都 应 该 处 理 。 


。 在 <DeckScreen> 轻 触 分 组 ， 应 该 导航 到 <ReviewScreen>, 

。 在 <DeckScreen> 轻 触 加 号 按钮 ， 应 该 导航 到 <NewCardScreen>, 

。 在 <NewCardScreen> 轻 触 完成 按钮 ， 应 该 导航 到 <DeckScreen>, 

。 在 <NewCardScreen> 轻 触 创建 卡片 按钮 ， 应 该 导航 到 一 个 新 的 <NewCardScreen>。 
。 在 <NewCardScreen> 轻 触 复习 分 组 按钮 ， 应 该 导航 到 <ReviewScreen>, 

。 在 <ReviewScreen> 轻 触 停止 复习 按钮 ， 应 该 导航 回 到 <DeckScreen>, 

。 在 <ReviewScreen> 轻 触 完成 按钮 ， 应 该 导航 回 到 <DeckScreen>。 

。 在 <DeckScreen> 创建 分 组 按钮 ， 应 该 导航 到 <NewCardScreen>, 

















本 节 修 改 后 的 代码 位 于 GitHub 上 (https://github.com/bonniee/learning-react-native/tree/2.0.0/ 
src/flashcards/src_checkpoint_02)。 其 中 修改 了 以 下 文件 : 














e components/DeckScreen/Deck.js 


e components/DeckScreen/DeckCreation.js 





e components/DeckScreen/index.js 

e components/NewCardScreen/index.js 
e components/ReviewScreen/index.js 

e components/Flashcards.js 


e components/Header/Logo.js 


10.4 本章 小 结 


在 React Native 中 组 织 较 大 型 的 应 用 有 时 候 是 一 种 挑战 。 虽 然 我 们 在 前 面 的 章节 中 已 经 研 
究 了 构建 React Native 应 用 所 必需 的 部 分 ， 但 是 闪 卡 应 用 说 明了 如 何 将 它们 结合 到 一 起 ， 
这 是 一 个 更 加 丰富 的 示例 。 通 过 使 用 React Navigation 库 ， 我 们 将 多 个 不 同 的 应 用 屏幕 组 
织 起 来 ， 形 成 了 有 凝聚 性 的 用 户 体验 。 


在 下 一 市 中 ， 我 们 将 继续 改进 内 卡 应 用 ， 为 其 添加 Redux (一 个 状态 管理 库 )， 并 将 其 整合 
到 Asyncstorage， 以 便 在 应 用 运行 期 间 保持 状态 的 持久 化 。 
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第 11 章 





大 型 应 用 中 的 状态 管理 


在 第 10 章 中 ， 我 们 以 内 卡 应 用 作为 出 发 点 ， 讨 论 了 大 型 应 用 的 结构 。 随 着 规模 增长 ， 
React 应 用 经 常 遇 到 的 一 个 问题 是 状态 管理 。React Native 也 不 例外 : 随 着 应 用 日 益 庞 大 ， 


使 用 状态 管理 库 会 对 我 们 有 利 。 本 章 中 我 们 会 学 习 管理 数据 流 的 库 Redux， 并 








办 卡 应 用 中 。 此 外 ， 我 们 还 会 把 AsyncStorage 和 Redux store 整合 在 一 起 。 


11.1 使 用 Redux 管 理 状态 


将 其 整 














合 到 


Redux 在 一 定 程度 上 基于 Flux 数据 量 模 式 以 及 函数 式 编程 的 概念 。 本 书 前 面 的 例子 对 于 数 
据 流 管理 方面 并 没有 太 多 的 要 求 。 对 于 较 小 型 的 应 用 来 说 ， 组 件 间 通信 通常 是 一 个 微 不 足 
道 的 问题 。 设 想 这 样 一 个 常见 情景 ， 点击 一 个 按钮 后 ， 其 父 组 件 的 状态 会 受到 影响 ， 如 下 











所 示 。 


class Child extends Component { 
render() { 
<TouchableOpacity onPress={this.props.onPress}> 
<Text>Child Component</Text> 
</TouchableOpacity> 
} 
} 


从 父 组件 向 子 组 件 传递 回调 函数 ， 我 们 就 可 以 向 父 组 件 通知 子 组 件 发 生 的 交互 : 


class Parent extends Component { 
constructor(props) { 
super(props); 
this.initialState = { numTaps: 0 }; 
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} 


_handlePress = () => { 
this.setState({numTaps: this.state.numTaps + 1}); 


} 


render() { 
<Child onPress={this._handlePress}/> 
} 
} 


对 于 简单 的 情况 ， 这 种 模式 是 够 用 的 。 


当 我 们 遇 到 更 复杂 的 交互 时 ， 会 需要 更 加 健壮 的 数据 流体 系 结构 。 当 组 件 树 更 深 处 的 组 件 
需要 影响 更 高 层 的 应 用 状态 时 ， 会 发 生 什么 呢 ?” 代 码 会 像 意 大 利 面 一 样 绰 在 一 起 ， 让 你 不 
得 不 花费 许多 时 间 处 理 各 种 回调 。 管 理 活动 路 由 、 处 理 用 户 交互 、 从 服务 器 获取 数据 、 管 
理 动 画 变 化 …… 随 着 你 往 应 用 中 添加 的 状态 越 来 越 多 ,复杂 度 会 增加 ， 并 且 会 以 不 可 预测 
的 方式 去 触发 层 登 更 新 。 



























































有 很 多 库 旨 在 简化 应 用 状态 的 管理 ，Redux 就 是 其 中 一 个 ， 它 的 目标 是 使 得 应 用 状态 可 预 
测 且 易 于 管理 。 


在 Redux 中 ， 状 态 位 于 单个 对 象 中 ， 而 该 对 象 位 于 单一 的 store 中 ， 它 充当 唯一 的 数据 来 
源 。 需 要 基于 状态 泻 染 的 组 件 ， 可 以 连接 (connect) 到 store 中 ， 并 通过 属性 (props) 接 
收 状 态 。 组 件 是 不 能 直接 修改 状态 的 。 

状态 的 修改 是 通过 一 系列 预定 义 的 action 来 触发 的 。 单 个 reducer 负责 组 合 先前 的 状态 和 


action 中 的 信息 ， 用 于 计算 出 新 的 状态 。 因 此 ， 关 于 状态 如 何 改 变 、 何 时 改变 的 逻辑 ， 可 
以 集中 在 一 个 易于 调试 的 位 置 中 。 























上 述 这 些 内 容 通 过 实践 来 说 明 可 能 比 起 纯 理 论 更 有 实际 意义 。 我 们 来 安装 Redux, HEA 
如 何 将 其 添加 到 闪 卡 应 用 中 。 除 了 redux 包 以 外 ， 我 们 还 要 安装 react-redux 包 ， 它 负责 
将 React 和 Redux 绑 定 到 一 起 。 

















npm install --save redux react-redux 


11.2 action 


首先 我 们 要 定义 哪些 类 型 的 action 会 导致 状态 变化 。 我 们 创建 一 些 字符 串 常 量 来 表示 不 同 
类 型 的 动作 ( 见 例 11-1)。 





例 11-1 src_checkpoint_03/actions/types.js 


export const ADD_DECK = "ADD_DECK"; 
export const ADD_CARD = "ADD_CARD"; 
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export const REVIEW_DECK = "REVIEW_DECK"; 
export const STOP_REVIEW = "STOP_REVIEW"; 
export const NEXT_REVIEW = "NEXT_REVIEW"; 


上 述 的 每 一 个 action 类 型 都 表示 一 种 用 户 交 互 ， 并 且 洱 盖 了 应 用 的 基本 功能 : 添加 卡片 或 
分 组 ;开始 或 停止 复习 。 


在 Redux 中 ，action 指 的 是 一 个 包含 了 type 键 和 某 些 可 选 额外 数据 的 对 象 。 我 们 需要 添加 
一 些 action 创建 函数 来 创建 这 些 对 象 ( 见 例 11-2)。 虽 然 理 论 上 我 们 可 以 跳 过 为 action 创 
建国 数 创建 单独 文件 的 步骤 ， 但 是 集中 这 些 代码 有 助 于 保持 React 组 件 的 整洁 ， 并 且 让 我 
们 可 以 在 单独 的 文件 中 找到 action 的 定义 。 























例 11-2 src_checkpoint 03/actions/creators.js 
import { 
ADD_DECK, 
ADD_CARD , 
REVIEW_DECK, 
STOP_REVIEW, 
NEXT_REVIEW 
} from "./types"; 


import Card from "../data/Card"; 
import Deck from "../data/Deck"; 


export const addDeck = name => { 
return { type: ADD_DECK, data: new Deck(name) }; 
}; 


export const addCard = (front, back, deckID) => { 
return { type: ADD_CARD, data: new Card(front, back, deckID) }; 
}; 


export const reviewDeck = deckID => { 
return { type: REVIEW_DECK, data: { deckID: deckID } }; 
}; 


export const stopReview = () => { 
return { type: STOP_REVIEW, data: {} }; 
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export const nextReview = () => { 
return { type: NEXT_REVIEW, data: {} }; 
}; 





这 些 action 创建 函数 从 多 方面 提供 了 便捷 。 例 如 addDeck 这 个 action 创建 函数 ， 它 可 以 接 
收 一 个 分 组 名 字 作 为 参数 ， 然 后 处 理 Deck 的 实际 构造 。 








11.3 reducer 


action 表示 应 用 中 发 生 的 事情 ，reducer 则 描述 了 应 用 状态 变化 是 如 何 响应 action 的 。 
reducer 是 一 个 “ 纯 函 数 ”: 它 是 没有 副作用 的 ， 并 且 它 的 返回 值 仅 由 输入 值 决 定 。( 例 如 ， 
不 能 在 reducer 中 调用 Math.random, ) 








我 们 可 以 这 样 编写 一 个 最 简单 的 reducer: 


const reducer = (state = {}, action) => { 
return state; 


} 
state 里 面包 含 了 两 项 : 包含 分 组 的 数据 ， 以 及 当前 复习 的 信息 。 默 认 的 state 看 起 来 像 

















decks: [], 

currentReview: { 
deckID = null, 
questions = [], 
currentQuestionIndex = 0 


} 











我 们 开始 编写 第 一 个 reducer， 从 处 理 ADD_DECK action 开始 。 打 开 前 面 创建 的 actions/creators js， 
可 以 看 到 下 面 这 个 action: 








{ 
type: ADD_DECK, 
data: new Deck(name) 


} 
如 果 我 们 要 为 decks 键 编写 reducer， 函 数 签名 应 该 如 下 所 示 : 
const decksReducer = (state = [], action) => { 
// 返回 某 些 状态 
} 


我 们 想 要 把 action 中 的 新 分 组 添加 到 现 有 的 状态 中 ， 所 以 让 我 们 来 实现 deckReducer , 





const deckReducer = (state = [], action) => { 
switch (action.type) { 
case ADD_DECK: 
return state.concat(action.data); 


} 


return state; 


} 


首先 我 们 需要 一 个 基于 action 类 型 的 switch 语句 。 现 在 ， 我 们 只 处 理 了 ADD_DECK action, 
在 其 他 的 所 有 情况 下 ， 都 会 返回 未 修改 的 原始 状态 。 这 一 点 非常 重要 一 一 别 忘 了 处 理 默 认 
情况 ! 
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然后 ， 如 果 action 类 型 确实 是 ADD_DECK， 我 们 就 将 新 分 组 连接 到 现 有 分 组 后 面 


$ 
z 
z 














接 下 来 ， 我 们 实现 deckReducer 的 剩余 逻辑 ( 见 例 11-3). 





例 11-3 src_checkpoint_03/reducers/decks.js 
import { ADD_DECK, ADD_CARD } from "../actions/types"; 


function decksWithNewCard(oldDecks, card) { 
return oldDecks.map(deck => { 
if (deck.id === card.deckID) { 
deck.addCard(card); 
return deck; 
} else { 
return deck; 


H; 
} 


const reducer = (state = [], action) => { 
console.warn("Changes are not persisted to disk"); 


switch (action.type) { 
case ADD_DECK: 
return state.concat(action.data); 
case ADD_CARD: 
return decksWithNewCard(state, action.data); 


} 


return state; 


}; 


export default reducer; 


下 一 个 轮 到 复习 reducer (JL Bil 11-4)。 这 个 reducer 会 处 理 REVIEW_DECK、NEXT_REVIEW 和 
STOP_REVIEW action。 处 理 STOP_REVIEW 是 最 简单 的 ， 只 需要 把 状态 还 原 成 默认 状态 即 可 。 
对 于 NEXT_REVIEW， 我 们 要 自 增 复习 的 索引 。 处 理 REVIEW_DECK 会 有 点 复杂 ， 因 为 我 们 要 拿 
到 分 组 卡片 ， 并 且 基 于 卡片 生成 提问 。 














例 11-4 src_checkpoint_03/reducers/reviews.js 


import { mkReviews } from "./../data/QuizCardView"; 
import { REVIEW_DECK, NEXT_REVIEW, STOP_REVIEW } from "./../actions/types"; 


export const mkReviewState = ( 
deckID = null, 
questions = [], 
currentQuestionIndex = 0 
) => { 
return { deckID, questions, currentQuestionIndex }; 


}; 


function findDeck(decks, id) { 
return decks.find(d => { 
return d.id === id; 





})s 
} 


function generateReviews(deck) { 
return mkReviewState(deck.id, mkReviews(deck.cards), 0); 


} 


function nextReview(state) { 
return mkReviewState( 
state.deckID, 
state.questions, 
state.currentQuestionIndex + 1 
); 
} 


const reducer = (state = mkReviewstate(), action, decks) => { 
switch (action.type) { 
case REVIEW_DECK: 
return generateReviews(findDeck(decks, action.data.deckID)); 
case NEXT_REVIEW: 
return nextReview(state) ; 
case STOP_REVIEW: 
return mkReviewState(); 
} 
return state; 


J; 


export default reducer; 
要 注意 这 个 reducer 是 依赖 于 分 组 信息 的 ， 所 以 它 的 函数 签名 和 decksReducer 相 比 有 些 不 同 。 


现在 我 们 要 将 它们 连 起 来 。 在 Redux 中 ， 只 能 连接 单个 reducer 到 store 中 ， 所 以 我 们 要 将 
它们 组 合成 一 个 reducer ( 见 例 11-5)。 





例 11-5 src_checkpoint 03/reducers/index.js 
import { MockDecks, MockCards } from "./../data/Mocks"; 


import DecksReducer from "./decks"; 
import ReviewReducer, { mkReviewState } from 


./reviews"; 


const initialState = () => { 
return { decks: MockDecks, currentReview: mkReviewState() }; 


J; 


export const reducer = (state = initialState(), action) => { 
let decks = DecksReducer(state.decks, action); 


return { 
decks: decks, 
currentReview: ReviewReducer(state.currentReview, action, decks) 
F3 
J; 


现在 我 们 已 经 编写 了 一 些 Redux 特定 的 代码 ， 下 一 步 就 是 要 整合 到 实际 应 用 中 了 。 

















四 
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11.4 连接 Redux 


还 记得 前 文中 说 过 ， 状 态 会 存储 在 单一 的 Redux store 中 吗 ? 现在 打开 应 用 根 组 件 文 介 








components/Flashcard.js， 并 创建 这 个 store。 


ay 





首先 我 们 要 从 redux 中 导入 createStore 方法 ， 以 及 刚才 在 reducers/index.js 中 创建 的 





reducer。 然 后 就 可 以 创建 store 了 。 


import { createStore } from "redux"; 
import { reducer } from "../reducers/index"; 


let store = createStore(reducer); 


接 下 来 为 了 从 我 们 的 应 用 中 使 用 这 个 存储 ， 需 要 添加 一 个 <Provider> 组 件 。 











在 <Provider> 中 包装 应 用 根 组 件 之 后 ， 你 就 可 以 在 任意 组 件 层 次 的 任意 部 分 中 使 用 Redux 
store。 要 记 住 Redux state 是 只 读 的 ， 因 此 在 组 件 层次 的 任何 地 方 使 用 只 读 状态 都 不 会 有 











风险 。<Provider> 组 件 是 react-redux 包 中 的 一 部 分 。 





让 我 们 行动 起 来 。 例 11-6 展示 了 整合 Redux store 之 后 的 完整 组 件 文 件 。 


例 11-6 src_checkpoint 03/components/Flashcards.js 


import React, { Component } from "react"; 

import { StyleSheet, View } from "react-native"; 
import { StackNavigator } from "react-navigation"; 
import { createStore } from "redux"; 

import { Provider } from "react-redux"; 


import { reducer } from "../reducers/index"; 


" /Header/Logo"; 

"| /DeckScreen"; 

", /NewCardScreen"; 
. /ReviewScreen"; 


import Logo from 
import DeckScreen from 
import NewCardScreen from 
import ReviewScreen from 


let store = createStore(reducer); 


let headerOptions = { 
headerStyle: { backgroundColor: "#FFFFFF" }, 
headerLeft: <Logo /> 

}; 


const Navigator = StackNavigator({ 
Home: { screen: DeckScreen, navigationOptions: headerOptions }, 
Review: { screen: ReviewScreen, navigationOptions: headerOptions }, 
CardCreation: { 
screen: NewCardScreen, 
path: "createCard/:deckID", 
NavigationOptions: headerOptions 





}); 


class App extends Component { 
render() { 
return ( 
<Provider store={store}> 
<Navigator /> 
</Provider> 
)3 
} 
} 


export default App; 


现在 我 们 已 经 集成 Redux 了 ， 我 们 用 它 来 泻 染 一 些 数据 。 首 先 修 改 <DecksScreen> 组 件 ， 
让 其 基于 Redux store 中 的 内 容 显示 分 组 。 

















要 将 给 定 的 组 件 连 接 到 Redux store， 可 以 使 用 react-redux 绑 定 。 





import { connect } from "react-redux" 
然后 要 定义 两 个 函数 : mapStateToProps 和 mapDispatchToProps, 


mapStateToProps 描述 了 Redux store 的 状态 是 如 何以 属性 方式 提供 给 组 件 的 。 因 为 我 们 的 
状态 包含 了 分 组 数组 ， 所 以 顺便 在 这 里 计算 counts 属性 ， 即 卡片 的 总 数 。 








const mapStateToProps = state => { 
return { 
decks: state.decks, 
counts: state.decks.reduce( 
(sum, deck) => { 
sum[deck.id] = deck.cards. length; 
return sum; 
}, 
{} 
) 
Fs 
J; 


lal Ih}, mapDispatchToProps 也 定义 了 组 件 要 接收 的 一 些 属性 ， 这 些 属性 可 以 用 来 分 发 
action。 我 们 要 导入 action 创建 函数 ， 然 后 从 这 里 调用 它们 。 


import { addDeck, reviewDeck } from "./../../actions/creators"; 
const mapDispatchToProps = dispatch => { 
return { 
createDeck: deckAction => { 
dispatch(deckAction) ; 
}, 
reviewDeck: deckID => { 
dispatch(reviewDeck(deckID)); 














m 
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} 
}; 
J}; 


最 后 我 们 要 调用 connect() 方法 ， 创 建 一 个 连接 到 Redux 的 组 件 。 





Tit 
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export default connect(mapStateToProps, mapDispatchToProps)(DecksScreen) ; 








将 这 些 内 容 组 合 到 一 起 ， 我 们 就 可 以 在 组 件 里 面 使 用 这 些 新 属性 (reviewDeck, createDeck, 
decks, counts) [, BE, <DecksScreen> 会 基于 从 Redux 接收 到 的 属性 进行 泻 染 ， 而 且 
会 分 发 Redux action ， 代 替 原 本 直接 修改 state 的 方式 〈 见 例 11-7)。 


























例 11-7 src_checkpoint_03/components/DeckScreen/index.js 


import React, { Component } from "react"; 
import { View } from "react-native"; 


import { connect } from "react-redux"; 


import { MockDecks } from "./../../data/Mocks"; 

import { addDeck, reviewDeck } from "./../../actions/creators"; 

import Deck from "./Deck"; 

import DeckCreation from "./DeckCreation"; 

class DecksScreen extends Component { 
static displayName = "DecksScreen"; 


static navigationOptions = { title: "All Decks" }; 


_createDeck = name => { 
let createDeckAction = addDeck(name) ; 
this.props.createDeck(createDeckAction) ; 
this.props.navigation.navigate("CardCreation", { 
deckID: createDeckAction.data.id 
}) 
}; 


_addCards = deckID => { 
this.props.navigation.navigate("CardCreation", { deckID: deckID }); 


}; 


_review = deckID => { 
this.props.reviewDeck(deckID); 
this.props.navigation.navigate("Review"); 


}; 


_mkDeckViews() { 
if (!this.props.decks) { 
return null; 


} 


return this.props.decks.map(deck => { 
return ( 





<Deck 
deck={deck} 
count={this.props.counts[deck.id]} 
key={deck.id} 
add={() => { 
this._addCards(deck.id); 
H 
review={() => { 
this._review(deck.id); 
H 
/> 
); 
p; 
} 


render() { 
return ( 
<View> 
{this._mkDeckViews()} 
<DeckCreation create={this._createDeck} /> 
</View> 
)3 
} 
} 


const mapDispatchToProps = dispatch => { 
return { 
createDeck: deckAction => { 
dispatch(deckAction) ; 
}, 
reviewDeck: deckID => { 
dispatch(reviewDeck(deckID)); 
} 
33 
}; 


const mapStateToProps = state => { 
return { 
decks: state.decks, 
counts: state.decks.reduce( 
(sum, deck) => { 
sum[deck.id] = deck.cards. length; 
return sum; 
Js 
{} 
) 
X 
J; 


export default connect(mapStateToProps, mapDispatchToProps)(DecksScreen); 









































一 般 来 说 ， 当 你 转换 到 Redux 或 者 类 似 的 库 的 时 候 ， 常 用 的 模式 是 替换 或 改变 this.state 
的 访问 。 组 件 对 props (而 非 state) 的 依赖 度 越 高 ， 在 应 用 中 管理 复杂 度 就 越 容 易 。 
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我 们 还 要 对 <NewCardScreen> 和 <ReviewScreen> 组 件 进行 类 似 的 更 新 ， 分 别 参见 例 11-8 和 例 
11-9。 正 如 我 们 对 <DecksScreen> 所 做 的 那样 ， 我 们 为 它们 分 别 实现 了 mapDispatchToProps 
和 mapStateToProps 方法 。 


例 11-83 src_checkpoint_03/components/NewCardScreen/index.js 


import React, { Component } from "react"; 
import { StyleSheet, View } from "react-native"; 


import DeckModel from "./../../data/Deck"; 
import { addCard } from "./../../actions/creators"; 
import { connect } from "react-redux"; 


import Button from "../Button"; 

import LabeledInput from "../LabeledInput"; 
import NormalText from "../NormalText"; 
import colors from "./../../styles/colors"; 


class NewCard extends Component { 
static navigationOptions = { title: "Create Card" }; 


static initialState = { front: "", back: "" }; 


constructor(props) { 
super(props); 
this.state = this.initialState; 


} 


_deckID = () => { 
return this.props.navigation.state.params.deckID; 


ae 


_handleFront = text => { 
this.setState({ front: text }); 
}; 


_handleBack = text => { 
this.setState({ back: text }); 
}; 


_createCard = () => { 
this.props.createCard(this.state.front, this.state.back, this._deckID()); 
this.props.navigation.navigate("CardCreation", { deckID: this._deckID() }); 
}; 


_reviewDeck = () => { 
this.props.navigation.navigate("Review"); 

}; 

_doneCreating = () => { 
this.props.navigation.navigate("Home"); 


}; 


render() { 





return ( 
<View> 
<LabeledInput 
label="Front" 
clearOnSubmit={false} 
onEntry={this._handleFront} 
onChange={this._handleFront} 
/> 
<LabeledInput 
lLabel="Back" 
clearOnSubmit={false} 
onEntry={this._handleBack} 
onChange={this._handleBack} 


/> 


<Button style={styles.createButton} onPress={this._createCard}> 


<NormalText>Create Card</NormalText> 
</Button> 


<View style={styles.buttonRow}> 


<Button style={styles.secondaryButton} onPress={this._doneCreating}> 


<NormalText>Done</NormalText> 
</Button> 


<Button style={styles.secondaryButton} onPress={this._reviewDeck}> 


<NormalText>Review Deck</NormalText> 
</Button> 
</View> 
</View> 
)3 
} 
} 


const styles = StyleSheet.create({ 
createButton: { backgroundColor: colors.green }, 
secondaryButton: { backgroundColor: colors.blue }, 
buttonRow: { flexDirection: "row" 


})s 


const mapStateToProps = state => { 
return { decks: state.decks }; 


J; 


const mapDispatchToProps = dispatch => { 
return { 
createCard: (front, back, deckID) => { 
dispatch(addCard(front, back, deckID)); 
} 
}; 
}; 


export default connect(mapStateToProps, mapDispatchToProps)(NewCard) ; 
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例 11-9 src_checkpoint_03/components/ReviewScreen/index.js 


import React, { Component } from "react"; 
import { StyleSheet, View } from "react-native"; 


import { connect } from "react-redux"; 
import ViewCard from "./ViewCard"; 
import { mkReviewSummary } from "./ReviewSummary"; 
import colors from "./../../styles/colors"; 
import { reviewCard, nextReview, stopReview } from " 
class ReviewScreen extends Component { 

static displayName = "ReviewScreen"; 

static navigationOptions = { title: "Review" }; 


constructor(props) { 
super (props); 
this.state = { numReviewed: ©, numCorrect: 0 }; 


} 


onReview = correct => { 
if (correct) { 
this.setState({ numCorrect: this.state.numCorrect + 1 }); 
} 
this.setState({ numReviewed: this.state.numReviewed + 1 }); 


}; 


_nextReview = () => { 
this.props.nextReview(); 


Ai 


_quitReviewing = () => { 
this.props.stopReview(); 
this.props.navigation.goBack(); 


J; 


_contents() { 
if (!this.props.reviews || this.props.reviews.length === 0) { 
return null; 


} 


if (this.props.currentReview < this.props.reviews.length) { 
return ( 
<ViewCard 
onReview={this.onReview} 
continue={this._nextReview} 
quit={this._quitReviewing} 
{...this.props.reviews[this.props.currentReview] } 
/> 
)3 
} else { 
let percent = this.state.numCorrect / this.state.numReviewed; 
return mkReviewSummary(percent, this. _quitReviewing); 


} 


./../../actions/creators"; 





render() { 
return ( 
<View style={styles.container}> 
{this._contents()} 
</View> 
)3 
} 
} 


const styles = StyleSheet.create({ 
container: { backgroundColor: colors.blue, flex: 1, paddingTop: 24 } 
D; 


const mapDispatchToProps = dispatch => { 
return { 
nextReview: () => { 
dispatch(nextReview()); 
}, 
stopReview: () => { 
dispatch(stopReview()); 
} 
33 
}; 


const mapStateToProps = state => { 
return { 
reviews: state.currentReview. questions, 
currentReview: state.currentReview.currentQuestionIndex 
}; 
}; 


export default connect(mapStateToProps, mapDispatchToProps)(ReviewScreen) ; 


11.5 ”使 用 AsyncStorage 持 久 化 数据 


























重启 应 用 ， 数 据 就 会 丢失 。 我 们 可 以 通过 Asyncstorage 保存 应 用 状态 ， 来 修复 这 个 问题 。 





现在 ， 我 们 的 办 卡 应 用 状态 还 没有 持久 化 。 因 此 ， 如 果 我 们 添加 了 新 分 组 或 者 新 卡片 ， 然 后 


这 个 例子 可 以 真正 展示 Redux 的 强大 之 处 : 因为 状态 管理 的 逻辑 是 集中 的 ， 所 以 进行 这 样 








的 逻辑 修改 时 ， 会 比 其 他 形式 的 代码 更 加 简单 。 


























首先 ， 添 加 一 个 负责 处 理 读 / 写 逻 辑 的 文件 ， 用 来 将 状态 持久 化 到 磁盘 上 ， 见 例 11-10。 要 
记 住 的 是 ，AsyncStorage.getItem 和 AsyncStorage.setItem 都 是 异步 API。 
例 11-10 src_checkpoint_04/storage/decks.js 

import { AsyncStorage } from "react-native"; 

import Deck from "./../data/Deck"; 

export const DECK_KEY = "flashcards:decks"; 

import { MockDecks } from "./../data/Mocks"; 
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async function read(key, deserializer) { 
try { 
let val = await AsyncStorage.getItem(key); 
if (val !== null) { 
let readValue = JSON.parse(val).map(serialized => { 
return deserializer(serialized); 
D; 
return readValue; 
} else { 
console.info(`${key} not found on disk.`); 
return []; 
} 
} catch (error) { 
console.warn("AsyncStorage error: 
} 
} 


» error.message); 


async function write(key, item) { 
try { 
await AsyncStorage.setItem(key, JSON.stringify(item)); 
} catch (error) { 
console.error("AsyncStorage error: 
} 
} 


, error.message); 


export const readDecks = () => { 
return read(DECK_KEY, Deck.fromObject); 


}; 


export const writeDecks = decks => { 
return write(DECK_KEY, decks); 


}; 
// 用 作 调 试 /测试 


const replaceData = writeDecks(MockDecks); 





要 记 住 我 们 的 Redux state 中 有 两 个 元 素 : decks 和 currentReview。 由 于 currentReview 
是 暂时 性 的 信息 ， 我 们 只 需要 关心 如 何 保 存 decks 即 可 。 


现在 ,我们 已 经 拥有 了 将 分 组 信息 读 写 到 AsyncStorage 的 一 种 简便 方法 ， 我 们 来 添加 一 种 
新 的 action 类 型 LOAD_DATA 到 actions/types.js 中 ， 如 例 11-11 所 示 。 





例 11-11 添加 新 的 类 型 到 src_checkpoint_04/actions/types.js 中 
export const LOAD_DATA = "LOAD_DATA"; 


我 们 还 需要 将 对 应 的 action creator 添加 到 actions/creators.js 中 〈 见 例 11-12), 


11-12 添加 新 的 action creator 到 src_checkpoint_04/actions/creators.js 中 


export const loadData = data => { 
return { type: LOAD DATA, data: data }; 
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接 下 来 修改 Flashcards.js， 在 创建 store 之 后 从 磁盘 加 载 数据 。 





import { readDecks } from 
import { loadData } from 


../storage/decks"; 
../actions/creators"; 


let store = createStore(reducer); 


// 在 应 用 打开 时 ， 从 磁盘 读 取保 存 的 状态 
readDecks().then(decks => { 
store.dispatch(loadData(decks)); 


}); 

















既然 我 们 分 发 了 这 个 action， 就 要 修改 deck reducer 来 处 理 LOAD_DATA action。 此 外 ， 处 理 
ADD_CARD 或 者 ADD_DECK action 的 时 候 ，reducer 还 应 该 保存 分 组 状态 (UL 11-13). 


例 11-13 更 新 src_checkpoint_04/reducers/decks.js， 用 来 保存 状态 


import { ADD_DECK, ADD_CARD, LOAD_DATA } from "../actions/types"; 
import Deck from "./../data/Deck"; 
import { writeDecks } from "./../storage/decks"; 


function decksWithNewCard(oldDecks, card) { 
let newState = oldDecks.map(deck => { 
if (deck.id === card.deckID) { 
deck.addCard(card); 
return deck; 
} else { 
return deck; 
} 
}); 
saveDecks(newState) ; 
return newState; 


} 


function saveDecks(state) { 
writeDecks(state); 
return state; 


} 


const reducer = (state = [], action) => { 
switch (action.type) { 
case LOAD_DATA: 
return action.data; 
case ADD_DECK: 
let newState = state.concat(action.data); 
saveDecks(newState) ; 
return newState; 
case ADD_CARD: 
return decksWithNewCard(state, action.data); 
} 


return state; 


J; 


export default reducer; 














m 
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就 是 这 样 ! 由 于 状态 是 由 Redux 管理 的 ， 我 们 可 以 放心 的 是 ， 通 过 修改 deck reducer, W 
可 以 确保 将 所 有 相关 的 状态 修改 持久 化 到 AsyncStorage 中 。 


11.6 ”本章 小 结 和 作业 


对 于 Redux 和 类 似 的 状态 管理 库 ， 有 一 种 常见 的 批评 ， 认 为 它们 会 添加 大 量 的 模板 代码 到 
应 用 中 。 事 实 上， 为 了 将 Redux 整合 到 内 卡 应 用 里 ， 我 们 确实 编写 了 几 个 新 文件 。 然 而 通 
过 显 式 地 表达 状态 关系 ， 而 非 局 部 改变 状态 ， 这 样 的 “模板 ”可 以 使 得 现 有 的 复杂 性 更 加 
易于 管理 。 使 用 Redux 之 后 ， 你 很 难 会 编写 出 基于 状态 的 bug ! 此 外 ， 你 还 会 获得 一 些 额 
外 的 好 处 ， 比 如 时 间 旅 行 调 试 。 另 外 ， 正 如 我 们 在 整合 AsyncStorage 时 看 到 的 那样 ， 对 应 
用 做 进一步 的 修改 也 会 变 得 更 加 简单 。 







































































使 用 哪个 特定 的 状态 管理 库 并 不 重要 ， 有 很 多 合理 的 方法 来 构造 大 型 应 用 。 但 是 ， 与 任何 
大 型 React 应 用 一 样 ， 如 果 你 没有 提前 规划 状态 管理 ， 那 么 你 最 终 可 能 会 遇 到 和 状态 变化 
相关 的 bug， 并 且 很 难 修改 现 有 组 件 。 如 果 你 碰 到 了 这 样 的 迹象 ， 就 应 该 在 状态 和 数据 流 
管理 中 投入 更 多 的 精力 了 。 





















































办 卡 应 用 可 以 作为 参考 。 从 很 多 方面 来 说 ， 它 都 是 一 个 “最 小 可 行 项 目 ”， 有 很 多 可 以 提 
升 的 空间 。 也 就 是 说 ， 代 码 库 中 还 有 很 多 需要 探索 的 地 方 ， 我 鼓励 你 去 深入 研究 它 。 


如 果 你 希望 在 React Native 上 下 文中 进行 更 多 的 实践 ， 请 查看 GitHub 仓库 并 尝试 扩展 内 卡 
应 用 。 这 里 有 一 些 想 法 可 以 作为 切入 点 : 


。 补充 删除 分 组 的 功能 ， 

。 添加 一 个 可 以 查看 分 组 中 所 有 卡片 的 屏幕 ， 
。 随 着 时 间 推 移 ， 显 示 复 习 效 果 的 统计 信息 
。 不 同样 式 的 试验 。 
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CARERS, Wi! 


我 们 从 第 一 个 “Hello, World” React Native 应 用 的 开发 开始 ， 一 路 “过 其 斩 将 ”， 最 后 成 功 
创建 了 复杂 且 功 能 齐全 的 应 用 ， 并 且 在 iOS 和 Android 平台 上 实现 了 完全 的 代码 复 用 。 为 
了 完成 这 项 任务 ， 我 们 从 基础 的 React Native 组 件 和 样式 开始 学 起 ， 然 后 学 习 了 触摸 和 平 
台 原 生 API， 比 如 AsyncStorage 和 Geolocation 地 理 API。 我 们 还 掌握 了 通过 开发 者 工具 进 
行 React Native 调试 的 技巧 ， 以 及 部 署 应 用 到 真实 设备 的 方法 。 对 于 React Native 标准 库 之 
外 的 功能 ， 我 们 也 了 解 了 原生 Objective-C 和 Java 模块 的 用 法 ， 以 及 如 何 通过 npm 安装 第 
=F JavaScript 类 库 。 

















你 所 具备 的 JavaScript 和 React 的 知识 ， 再 加 上 本 书 中 所 讨论 的 内 容 ， 应 该 足以 让 你 快速 
且 高 效 地 开发 出 适用 于 iOS Android 平台 的 跨 平 台 应 用 了 。 当 然 ， 只 拥有 这 些 知识 还 远 
远 不 够 ， 你 仍 需要 不 断 学 习 ， 单 单 这 一 本 书 并 不 能 涵盖 React Native 移动 应 用 开发 的 方 方 
面 面 。 如 果 你 遇 到 困难 或 者 问题 ， 可 以 向 社区 求助 ， 例 如 Stack Overflow 或 IRC。 









































让 我 们 保持 联络 吧 | 加 入 Learning React Native (https://tinyletter.com/reactnative) 的 邮件 列 
表 ， 可 以 获取 更 多 关于 本 书 的 资源 和 更 新 。 你 也 可 以 在 Twitter 上 找到 我 : @brindelle。 





最 后 也 最 重要 的 是 ， 享 受 这 一 切 ! 期 待 看 到 你 们 的 优秀 作品 ! 
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附录 人 A 
现代 JavaScript 语 法 





本 书 中 的 一 些 代 码 使 用 了 现代 JavaScript 语法 。 如 果 你 对 这 些 语法 不 熟悉 的 话 也 不 要 紧 ， 
它 基 本 上 是 从 你 熟悉 的 JavaScript 语法 直接 翻译 过 来 的 。 


ECMAScript 5 (简称 ESS) 是 最 为 广泛 采用 的 JavaScript 语言 规范 。 然 而 ， 在 ES6、ES7 
和 更 新 的 版 本 中 ， 引 入 了 许多 引 人 了 瞩目 的 语言 特性 。React Native 使 用 Babel (https:/ 
babeljs.io/) 这 个 JavaScript 编译 器 来 转换 我 们 的 JavaScript Fl ISK 代码 。Babel 的 一 个 特点 
是 将 更 新 版 本 的 语法 编译 成 符合 ES5 规范 的 JavaScript 代码 ， 使 得 我 们 可 以 在 React 代码 
中 使 用 ES6 以 及 更 新 的 语法 。 











A.1 Let 和 const 
在 ES6 之 前 的 语法 中 ， 我 们 使 用 var 来 定义 变量 。 











在 ES6 中 ， 有 另外 两 种 声明 变量 的 方法 : Let 和 const. (EH const 声明 的 变量 不 能 重新 赋 
值 ， 也 就 是 说 ， 以 下 代码 是 无 效 的 : 


const count = 2; 
count = count + 1; // 错误 


使 用 let 或 者 var 声明 的 变量 可 以 重新 赋值 。 使 用 let 声明 的 变量 ， 只 能 在 它 定义 的 同一 
语句 块 中 使 用 。 








本 书 中 的 一 些 例子 依然 在 使 用 var， 但 是 你 也 会 看 到 let 和 const。 不 必 过 分 担心 它们 的 区 别 。 





184 


A.2 ”导入 模块 
我 们 可 以 使 用 CommonJS 模块 语法 来 导出 我 们 的 组 件 和 其 他 JavaScript 模块 (Il A-1)。 
在 这 个 系统 中 可 以 使 用 require 来 导入 其 他 模块 ， 还 可 以 通过 赋值 给 module.exports, ik 
文件 内 容 可 以 供 其 他 模块 使 用 。 

















例 A-1 使 用 CommonJS 语法 导入 导出 模块 


var OtherComponent = require('./other_component'); 
class MyComponent extends Component { 
} 


module.exports = MyComponent; 





使 用 ES6 模块 语法 ， 我 们 可 以 采用 export 和 import 命令 作为 代替 。 例 A-2 使 用 ES6 模块 
语法 展示 功能 相同 的 代码 。 


例 A-2 使 用 ES6 模块 语法 导入 导出 模块 


import OtherComponent from './other_component'; 
class MyComponent extends Component { 


} 


export default MyComponent; 


A.3 解构 
解构 赋值 给 我 们 提供 了 一 种 从 对 象 提取 数据 的 简便 方法 。 
这 是 符合 ESS 规范 的 代码 片段 : 
var my0bj = {a: 1, b: 2}; 
var a = my0bj.a; 
var b = my0bj.b; 
我 们 可 以 使 用 更 简洁 的 解构 赋值 : 


var {a, b} = {a: 1, b: 2}; 


你 可 能 经 常 在 import 语句 中 看 到 它 的 身影 。 在 引入 React 的 时 候 ， 实 际 上 我 们 取出 了 一 个 
对 象 ， 并 使 用 例 A-3 的 方法 来 获得 组 件 。 


例 A-3 非 解 构 语法 导入 组 件 
import React from "react"; 
let Component = React.Component; 
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但 使 用 解构 语法 会 让 代码 更 加 优雅 ， 如 例 A-4 所 示 。 
il A-4 解构 语法 导入 组 件 


import React, { Component } from "react"; 


A4 AAAS 


ES6 的 函数 简写 也 是 很 实用 的 。 在 符合 ESS 规范 的 JavaScript 中 ， 我 们 用 例 A-5 所 示 的 方 
法 来 声明 函数 。 


例 A-5 普通 函数 的 声明 方式 
render: function() { 
return <Text>Hi</Text>; 


} 
重复 使 用 function 关键 字 会 让 人 厌倦 。 例 A-6 展示 了 使 用 ES6 函数 简写 的 方式 编写 的 相 
同 的 函数 。 
例 A-6 函数 简写 的 声明 方式 


render() { 
return <Text>Hi</Text>; 


} 


A.5 箭头 函数 


在 ESS 版 本 的 JavaScript 中 ， 为 了 确保 国 数 的 上 下 文 〈 即 this 的 值 ) 符合 预期 ， 我 们 通常 
会 使 用 bind 函数 ( 见 例 A-7)。 这 种 方法 在 处 理 回调 函数 的 时 候 尤 为 常见 。 














例 A-7 使 用 ES5 的 JavaScript 手动 绑 定 函数 
var callbackFunc = function(val) { 
console. log('Do something'); 
}.bind( this); 

















箭头 函数 实现 了 自动 绑 定 ， 因 此 我 们 不 需要 手动 处 理 〈 见 例 A-8) 








例 A-8 使 用 箭头 函数 实现 绑 定 
var callbackFunc = (val) => { 
console. log('Do something'); 
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A6 默认 参数 
可 以 为 国 数 指定 默认 参数 ， 如 例 A-9 所 示 。 
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例 A-9 使 用 默认 参数 
var helloWorld = (name = "Bonnie") => { 
console. log("Hello, " + name); 


} 


helloWorld("Zach"); // 输出 "Hello, Zach" 
helloWorld(); // 输出 "Hello, Bonnie" 








当 你 想 要 为 参数 提供 一 个 合理 的 默认 值 时 ， 这 种 语法 很 方便 。 


A.7 Ff Stile 


在 ES5 版 本 的 JavaScript 中 ， 我 们 使 用 例 A-10 这 样 的 代码 来 实现 字符 串 拼 接 。 

















例 A-10 ESS 版 本 的 JavaScript 字符 串 拼接 


var API_KEY = ‘abcdefg'; 
var url = 'http://someapi.com/request&key=' + API_KEY; 

















ES6 则 为 我 们 提供 了 模板 字符 串 ， 它 支持 多 行 字符 串 以 及 字符 串 插 值 。 用 一 对 反 引 号 把 字 
符 串 围 起 来 ， 我 们 就 可 以 使 用 SO 语法 插入 其 他 变量 了 ( 见 例 A-11)。 





例 A-11 ES6 的 字符 串 插值 


var API_KEY = ‘abcdefg'; 
var url = ‘http://someapi.com/request&key=S{API_KEY}°; 


A.8 {FA promise 


promise 是 一 个 表示 某 件 终 将 发 生 的 事情 的 对 象 。 和 手动 处 理 成 功 和 失败 回调 的 方法 相 比 ， 
promise 的 区 别 在 于 提供 了 一 个 与 异步 操作 交互 一 致 的 API。 











假设 你 有 两 个 回调 : 一 个 处 理 成 功 的 情况 ， 另 一 个 处 理 失 败 的 情况 ( 见 例 A-12)。 








例 A-12 定义 两 个 回调 
function successCallback(result) { 
console.log("It succeeded: ", result); 


} 


function errorCallback(error) { 
console.log("It failed: ", error); 
} 
传统 风格 的 函数 可 能 会 期 待 接 收 两 个 回调 ， 并 且 根 据 成 功 或 者 失败 ， 调 用 其 中 一 个 ( 见 
例 A-13)。 
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例 A-13 在 传统 风格 的 JavaScript 代码 中 传递 成 功 和 失败 回调 


up LoadToSomeAPI(successCallback, errorCallback); 





拥有 现代 的 、 基 于 promise 的 语法 之 后 ， 你 就 可 以 通过 例 A-14 这 种 方式 来 传递 成 功 和 失败 
回调 。 


例 A-14 使 用 promise 传递 成 功 和 失败 回调 


up LoadToSomeAPI().then(successCallback, errorCallback); 





这 两 个 例子 看 起 来 非常 相似 ， 但 是 当 你 有 很 多 回调 或 者 异步 操作 要 执行 的 时 候 ， 使 用 
promise 的 优势 就 会 变 得 突出 。 假 设 你 需要 上 传 其 些 数据 给 API， 然 后 更 新 用 户 界面 ， 并 查 
找 新 数据 。 


如 果 使 用 传统 风格 的 回调 方式 ， 那 么 我 们 很 快 会 陷入 所 谓 的 “回调 地 狱 ”( 见 例 A-15)。 























例 A-15 链 式 回调 很 快 会 变 得 散乱 和 哆 唆 
UpLoadToSomeAPI( 
(result) => { 
updateUserInterface( 
result, 
uiUpdateResult => { 
checkForNewData( 
uiUpdateResult, 
newDataResult => { 
successCallback(newDataResult) ; 
}, 
errorCallback 
); 
}, 


errorCallback 





)3 
}, errorCallback 
)3 





有 了 promise， 我 们 就 可 以 使 用 then 方法 进行 链 式 调用 ， 如 例 A-16 所 示 。 


例 A-16 组 合 链 式 调用 更 加 简单 
uploadToSomeAPI() 
.then(result => updateUserInterface(result)) 
.then(uiUpdateResult => checkForNewData(uiUpdateResult) ) 
.then(newDataResult => successCallback(newDataResult) ) 
.catch(errorCallback) 





这 样 可 以 使 代码 更 加 简洁 ， 同 时 也 意味 着 我 们 不 需要 在 每 一 次 编写 函数 时 都 重新 实现 回调 
处 理 。 
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附录 B 


部 着 应 用 





构建 好 非常 棒 的 应 用 之 后 ， 你 自然 会 希望 将 它 交 给 更 多 的 用 户 使 用 。 








构建 和 部 署 生产 应 用 的 过 程 因 平台 而 异 ，Google 和 Apple 都 会 定期 更 新 所 需 的 特定 步骤 。 
然而 ， 基 本 的 流程 还 是 大 体 相同 的 。 


(1) 再 三 检查 你 的 静态 资源 ， 应 用 图 标 、 启 动 屏幕 等 。 
(2) 指定 目标 系统 版 本 和 目标 设备 。 

(3) 创建 release 版 本 构建 。 
(4) 完善 资料 ， 

(5) 创建 一 个 App Store 和 Play Store 列表 ， 其 中 包括 了 推广 的 截图 。 
(6) 将 应 用 发 给 beta 测试 人 员 ， 并 征求 反馈 意见 。 

(7) 提交 审核 。 

(8) 发 布 ! 


B1 检查 应 用 资源 ， 并 指定 目标 系统 版 本 和 目标 
设备 

在 生产 过 程 中 很 容易 忽略 这 些 步骤 。 你 要 确保 ， 对 于 所 有 希望 适 配 的 设备 ， 都 能 提供 尺寸 

和 分 辨 率 合适 的 应 用 图 标 和 启动 屏幕 。 
































= 






























































应 用 中 使 用 的 图 片 、 视 频 和 其 他 静态 资源 也 是 如 此 ， 请 确保 准备 好 匹配 每 个 目标 设备 的 版 本 。 
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B.2 创建 release 版 本 构建 


把 应 用 交付 给 用 户 之 前 ， 你 需要 将 应 用 编译 成 生产 就 绪 的 release 版 本 。 这 一 版 本 的 应 用 不 
会 开启 调试 功能 ， 并 且 会 导入 打包 后 的 JavaScript， 而 不 需要 依赖 React Native 打包 器 。 














不 管 是 iOS 还 是 Android，React Native 官方 文档 上 面 都 包含 了 如 何 构建 生产 就 绪 版 本 的 
指引 。 

mn SE oe hy 
B.3 完善 资料 


为 了 将 应 用 分 发 到 Android 设备 ， 你 可 能 需要 注册 Google Play 账号 。 类 似 地 ， 为 了 将 应 用 
提交 到 App Store， 你 可 能 需要 注册 Apple 开发 者 账号 。 





























在 这 个 过 程 中 ， 你 需要 提供 一 些 标准 信息 ， 例 如 联系 方式 以 及 支付 信息 。 


B.4 应 用 的 beta 测 试 


你 应 该 想 要 在 各 种 设备 和 操作 系统 版 本 上 进行 应 用 测试 。 它 在 横 屏 上 和 竖 屏 上 的 表现 分 别 
是 怎样 的 ? 电量 低 的 时 候 呢 ? 网 速 慢 的 时 候 呢 ? 推送 通知 干扰 用 户 的 时 候 呢 ? 























要 评估 应 用 在 真实 场景 下 的 表现 ， 最 佳 方式 就 是 交 给 真实 用 户 来 测试 。Play Store 和 App 
store 都 提供 了 内 置 程序 ， 方 便 你 把 应 用 分 发 给 beta 测试 人 员 。 


B.5 创建 列表 


你 需要 说 服用 户 下 载 你 的 应 用 ! 收集 推广 截图 ， 选 择 适 当 的 分 类 ， 然 后 编写 一 份 令 人 信服 
的 描述 。 














完成 上 述 这 些 步骤 后 ， 你 就 可 以 将 应 用 提交 审核 了 。 


B.6 ”等待 审核 


作为 Web 开发 人 员 ， 我 们 习惯 对 部 署 流程 拥有 更 多 的 控制 权 。 你 可 能 习惯 在 一 天 之 内 多 
次 将 代码 发 布 到 生产 环境 ， 版 本 变化 通常 也 不 是 什么 大 问题 。 但 使 用 iOS App Store 和 
Google Play Store 之 后 ， 发 布 就 变 得 复杂 多 了 。 新 版 本 的 发 布 通常 需要 审核 ， 审 核 时 间 从 
一 天 到 儿 周 不 等 。 因 此 ， 在 计划 阶段 就 要 考虑 提交 和 审核 过 程 ， 这 是 非常 重要 的 。 
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B.7 发 布 


历尽 艰辛 创建 应 用 之 后 ， 看 到 它 的 上 线 ( 见 图 B-1) 是 一 件 振奋 人 心 的 事情 。 然 而 ， 向 用 
户 发 布 应 用 只 是 一 个 开始 ， 因 为 你 在 发 布 应 用 后 还 必须 提供 支持 。 在 Web 上 你 可 以 频繁 而 
轻松 地 部 署 ， 但 是 移动 端 发 布 新 版 本 却 需 要 花费 时 间 ， 并 且 每 个 版 本 的 使 用 寿命 也 更 长 。 
{RZ iOS 和 Android 用 户 没 有 启用 自动 更 新 ， 所 以 每 一 个 版 本 都 需要 考虑 。 至 少 每 次 希望 
提交 更 新 或 者 bug 修复 时 ， 你 都 需要 等 待 应 用 审核 (对 于 真正 关键 的 bug 修复 ， 你 可 以 请 
求 加 快 审核 ,但 是 请 谨慎 使 用 )。 


Bonnie Eisenman Education 
€ Everyone 
f This app is compatible with your device. 
[=] Add to Wishlist a 

















CT 站 PE) CO rT 
ZEBRETO ZEBRETO ZEBRETO 
Gannanis due Ej Front: 
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(a) aa 
Stop Reviewing 


Create Card 














图 B-1: 闪 卡 应 用 可 以 从 Play Store 下 载 
最 后 ， 葵 喜 你 的 应 用 成 功 上 线 ! 
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附录 C 





使 用 Expo 应 用 


Expo 是 一 个 可 以 让 你 无 须 借助 Xcode 或 者 Android Studio 即 可 编写 React Native 应 用 的 工 
上 县。 使 用 Create React Native App 工具 创建 的 项 目 就 是 Expo MH. 


Expo 使 物理 设备 上 的 开发 变 得 非常 容易 ， 并 且 消 除了 初学 React Native 时 可 能 会 遇 到 的 各 


种 障碍 








。 因 此 ， 当 你 学 习 使 用 React Native 进行 开发 时 ， 它 是 一 个 非常 好 的 选择 。 





你 可 以 在 https://expo.io/ 上 了 解 更 多 关于 Expo 的 信息 ， 并 安装 Expo 移动 应 用 。 


从 Expo 分 离 


任何 依赖 于 原生 代码 的 项 目 (原生 代码 要 么 是 你 自己 的 ， 要 么 是 第 三 方 模块 指示 你 运行 
react-native link 进行 安装 的 ) 都 不 能 使 用 Expo 进行 开发 。Expo 提供 了 一 种 方法 ， 让 你 
将 项 目 分 离 (eject) 出 Expo， 并 还 原 成 传统 、 完 整 的 React Native 项 目 。 分 离 操作 会 从 现 
有 的 Expo 应 用 创建 出 完整 的 React Native 项 目 。 这 种 代码 迁移 是 单 向 的 ， 因 此 你 不 能 在 之 


后 重新 











回 到 Expo 了 。 





如 果 你 想 要 更 完整 地 控制 构建 ， 并 将 应 用 发 布 到 iOS App Store 或 者 Google Play Store, Af 
么 你 也 需要 从 Expo 中 分 离 。 


更 多 相关 信息 参见 Create React Native App 文档 (https://github.com/react-community/create- 


react-native-app ) o 
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关于 封面 

本 书 封面 上 的 动物 是 环 尾 袋 铬 (学 名 Pseudocheirus peregrinus) ， 是 澳洲 土生 土 长 的 有 袋 类 
动物 。 环 尾 袋 铬 是 食 草 类 动物 ， REEERE, CHANDY, KMAPT LARVA 
巴 而 得 名 。 





环 尾 党 铬 外 表 是 灰 棕 色 的 ， 体 长 可 达 35 厘 米 。 它 以 各 式 各 样 的 叶子 、 花 杀 和 水 果 为 食 。 
环 尾 党 铬 是 夜行 性 动物 ， 并 群居 在 业 穴 中 。 作 为 有 袋 类 动物 ， 环 尾 党 铬 会 把 它们 的 幼 总 置 
TRY, BAMEKK, TURIA, 


222 501 ER, KRARBKERR, PAMFRKEALA I, 12 h PARIR, È 
们 的 栖息 地 仍然 受到 威胁 。 


O'Reilly 书籍 封面 上 的 许多 动物 都 属于 濒危 物种 ， 它 们 都 是 这 个 世界 不 可 或 缺 的 一 部 分 。 
想 知 道 如 何 帮助 这 些 动物 的 话 ， 请 访问 http://animals.oreilly.com, 


本 书 封 面 图 片 来 自 Shaws Zoology. 
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